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開發工具或Firebug來檢查CSS。然後可以刪除縮進以查看是否導致問題。 –

謝謝，這正是問題所在。我至少看了20次，每次都完全忽略它。我剛剛從另一個元素粘貼了文本縮進：-5000px ;.我會怯懦地走開。謝謝你的幫助！ –

這就像預感，但我很確定你的問題是text-indent:-5000px;。考慮到你的文本輸入元素的寬度比在那裏設置的值小得多。

而且，就像一個點注意事項：

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

所以，你不希望使用無論如何，如果你希望自己的網頁發揮好與谷歌。

來源

2012-06-26 20:29:04 JAB

謝謝你的幫助。我會看那篇文章。 –

CSS和表單輸入：文本沒有顯示輸入文本

回答

相關問題