CSS 및 양식 입력 : 텍스트에 입력 텍스트가 표시되지 않음

입력 양식에 배경 이미지가 표시되도록하려고하지만 CSS 클래스를 입력에 적용하면 기본값이 표시되지 않습니다 (작동하지 않음). 적용된 CSS 클래스가없는 경우). 다음은 HTML입니다 :CSS 및 양식 입력 : 텍스트에 입력 텍스트가 표시되지 않음

<form> 
    <input type="text" class="emailInput" value="Enter your email address"> 
    <input type="submit" class="emailBtn" value=""> 
</form>

그리고 여기와 연관된 CSS입니다 : 내가 총 딱하다

input.emailInput { 
color:#000; 
background:url('images/emailBackground.png') no-repeat; 
display:block; 
width:313px; 
height:31px; 
text-indent:-5000px; 
position:relative; 
top:0px; 
left:-2px; 
border:none; 
} 
input.emailBtn { 
background:url('images/emailBtn.png') no-repeat; 
display:block; 
width:55px; 
height:38px; 
text-indent:-5000px; 
position:relative; 
top:-32px; 
left:323px; 
border:none; 
}

. 어떤 도움이라도 대단히 감사하겠습니다.

출처

2012-06-26 Adam R

아마도 text-indent:-5000px;으로 인해 텍스트가 보이는 영역 밖으로 배치 될 수 있습니다.

출처

2012-06-26 20:28:02 Quantastical

이 외에도 Firefox에서 IE 개발자 도구 또는 방화범을 끌기 도구를 사용하여 CSS를 검사하십시오. 그런 다음 들여 쓰기를 제거하여 이것이 문제를 일으키는 지 확인할 수 있습니다. –

감사합니다. 이것은 정확하게 문제입니다. 나는 이것을 적어도 20 번 보았을 때마다 그것을 간과했다. 텍스트가 들여 쓰기되어있는 다른 요소 (예 : -5000px)에서 붙여 넣었습니다. 나는 멍청하게 떠날 것이다. 당신의 도움을 주셔서 감사합니다! –

이것은 직감과 비슷하지만 문제가 text-indent:-5000px; 인 것으로 확신합니다. 텍스트 입력 요소가 너비에서 설정된 값보다 훨씬 작다는 것을 고려하십시오.

또한, 단지 노트의 점으로 :

http://luigimontanez.com/2010/stop-using-text-indent-css-trick/

그래서 당신은 당신이 당신의 페이지가 구글 좋은 재생하려면 어쨌든 경우 것을 사용하지 않습니다.

출처

2012-06-26 20:29:04 JAB

도와 주셔서 감사합니다. 나는 그 기사를 볼 것이다. –

CSS 및 양식 입력 : 텍스트에 입력 텍스트가 표시되지 않음

답변

관련 문제