Question

我正在尝试使输入表单具有背景图像，但是只要我将CSS类应用于输入，默认值就不会显示（如果没有应用CSS类，它会起作用）。这是HTML：

<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;
}

我完全失去了。任何帮助将不胜感激。

Answer 1

text-indent:-5000px;可能导致您的文字位于可见区域之外。

Answer 2

这就像预感一样，但我很确定你的问题是text-indent:-5000px;。考虑到您的文本输入元素的宽度远小于那里设置的值。

另外，请注意：

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

因此，如果您希望自己的网页能够与Google保持良好关系，那么您无论如何也不想使用它。

CSS和表单输入：文本不显示输入文本

2 个答案: