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和表单输入：文本没有显示输入文本

回答

相关问题