CSS 숨을 입력 버튼 값은 텍스트

StackOverflow https://stackoverflow.com/questions/600438

문제

현재는 스타일링 <input type='button'/> 요소는 다음과 같은 CSS:

background: transparent url(someimage);
color: transparent;

내가 원하는 버튼으로 표시하는 이미지만,나는 원하지 않는 value 텍스트를 표시합니다.이 for Firefox 으로 예상된다.그러나,인터넷 Explorer6and Internet Explorer7 내가 여전히 볼 수 있습니다.

나도 모든 종류의 숨기기 텍스트,하지만 성공하지.이 있는 솔루션을 Internet Explorer 행동하는가?

(나는 사용 제한 type=button 기 때문에 이것은 Drupal 형태와 양식을 API 를 지원하지 않는 이미지 유형.)

도움이 되었습니까?

해결책

당신은 왜 value 전혀 속성? 메모리에서, 당신은 그것을 지정할 필요가 없습니다 (HTML 표준은 확실하지 않다고 말할 수 있지만). 필요한 경우 a value 속성, 왜 단지 상태가 아닌가 value=""?

이 접근법을 취하면 CSS는 배경 이미지의 높이와 너비에 대한 추가 속성이 필요합니다.

다른 팁

나는 사용한다

button {text-indent:-9999px;}
* html button{font-size:0;display:block;line-height:0}  /* ie6 */
*+html button{font-size:0;display:block;line-height:0}  /* ie7 */

나는 반대의 문제가있었습니다 (인터넷 익스플로러에서 일했지만 Firefox에서는 그렇지 않았습니다). Internet Explorer의 경우 왼쪽 패딩을 추가해야하며 Firefox의 경우 투명한 색상을 추가해야합니다. 16px x 16px 아이콘 버튼에 대한 결합 된 솔루션이 있습니다.

input.iconButton
{
    font-size: 1em;
    color: transparent; /* Fix for Firefox */
    border-style: none;
    border-width: 0;
    padding: 0 0 0 16px !important; /* Fix for Internet Explorer */
    text-align: left;
    width: 16px;
    height: 16px;
    line-height: 1 !important;
    background: transparent url(../images/button.gif) no-repeat scroll 0 0;
    overflow: hidden;
    cursor: pointer;
}

잘:

font-size: 0; line-height: 0;

나를 위해 굉장한 일!

텍스트 인센트 속성을 -999EM과 같은 것으로 설정해 보셨습니까? 그것은 텍스트를 '숨기는 좋은 방법입니다.

또는 글꼴 크기를 0으로 설정할 수 있습니다.

http://www.productivedreams.com/ie-not-intepreting-text-indent-on-submit-buttons/

다른 IES에서 작동하는 솔루션에서보고있는 일부 차이는 호환성 모드를 켜거나 끄기 때문일 수 있습니다. IE8에서는 텍스트 인도가 잘 작동합니다 ~하지 않는 한 호환성 모드가 켜집니다. 호환성 모드가 켜져 있으면 글꼴 크기와 라인 높이가 트릭을 수행하지만 Firefox의 디스플레이를 엉망으로 만들 수 있습니다.

그래서 우리는 CSS 해킹을 사용하여 Firefox가 우리의 규칙을 무시하게 할 수 있습니다.

text-indent:-9999px;
*font-size: 0px; line-height: 0;

HTML 문서의 맨 위에 조건 진술을 사용하십시오.

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->

그런 다음 CSS에서 추가하십시오

.ie7 button { font-size:0;display:block;line-height:0 }

HTML5 보일러 플레이트에서 가져온 것 -보다 구체적으로 Paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-niter/

나는 이것을 어딘가에서 언급했다.

입력에 텍스트 변환을 추가하여 제거합니다

input.button {
    text-indent:-9999px;
    text-transform:capitalize;
}

CSS 파일에 쓰기 :

#your_button_id 
    {
        color: transparent;
    }

지원 font-size: 0.1px; 버튼은 Firefox, Internet Explorer 6, Internet Explorer 7 및 Safari에서 저를 위해 작동합니다. 내가 찾은 다른 솔루션 중 어느 것도 모든 브라우저에서 작동하지 않았습니다.

overflow:hidden 그리고 padding-left 나를 위해 잘 작동합니다.

Firefox의 경우 :

width:12px;
height:20px;
background-image:url(images/arrow.gif);
color:transparent;
overflow:hidden;
border:0;

IES의 경우 :

padding-left:1000px;

이것은 Firefox 3, Internet Explorer 8, Internet Explorer 8 호환성 모드, 오페라 및 사파리에서 작동합니다.

*참고 : 이것을 포함하는 테이블 셀 padding:0 그리고 text-align:center.

background: none;
background-image: url(../images/image.gif);
background-repeat:no-repeat;
overflow:hidden;
border: NONE;
width: 41px; /*width of image*/
height: 19px; /*height of image*/
font-size: 0;
padding: 0 0 0 41px;
cursor:pointer;

나는 매우 동일한 문제입니다.그리고 많은 다른 게시물보고:패딩 트릭만 작품에 대한 IE.

font-size:0px 여전히 일부를 보여줍니다.

는 유일한 것은 나를 위해 일을 하고 반대편

font-size:999px

...그러나 나만의 버튼 25x25 픽셀이 있습니다.

color:transparent;  /* For FF */
*padding-left:1000px ;  /* FOR IE6,IE7 */

이 다음은 저에게 가장 잘 작동했습니다.

HTML:

<input type="submit"/>

CSS:

input[type=submit] {
    background: url(http://yourURLhere) no-repeat;
    border: 0;
    display: block;
    font-size:0;
    height: 38px;
    width: 171px;
}

설정하지 않으면 value 너의 <input type="submit"/> 버튼 안에 기본 텍스트 "제출"을 배치합니다. 그래서, 그냥 설정하십시오 font-size: 0; 제출에서 height 그리고 width 이미지가 표시되도록 입력 유형의 경우. 예를 들어 필요한 경우 제출에 대한 미디어 쿼리를 잊지 마십시오.

CSS :

@media (min-width:600px) {
  input[type=submit] {
    width:200px;
    height: 44px;
  }
}

이것은 화면의 폭이 정확히 600px 이상인 경우 버튼이 크기가 변경됩니다.

대신, 그냥하십시오 hook_form_alter 버튼을 이미지 버튼으로 만들면 완료됩니다!

color:transparent; 그리고 어떤 것도 text-transform 속성도 트릭을 수행합니다.

예를 들어:

color: transparent;
text-transform: uppercase;
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top