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

Posted 2023-04-18

【中文标题】CSS 和表单输入：文本不显示输入文本

【英文标题】：CSS and form input:text not showing input text

【发布时间】：2012-06-28 05:54:36

【问题描述】：

我正在尝试使输入表单具有背景图像，但是一旦我将 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;

我完全不知所措。任何帮助将不胜感激。

【参考方案1】：

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

【讨论】：

除此之外，使用 IE 开发工具或 Firefox 中的 Firebug 来检查 CSS。然后您可以删除缩进，看看这是否导致了问题。

谢谢，这正是问题所在。我至少看了 20 次，每次都完全忽略了它。我刚刚从另一个元素粘贴了文本缩进：-5000px;。我会怯怯地走开。感谢您的帮助！

【参考方案2】：

这只是预感，但我很确定您的问题是 text-indent:-5000px;。考虑到您的文本输入元素的宽度远小于此处设置的值。

另外，请注意：

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

因此，如果您希望您的网页与 Google 配合得很好，则无论如何都不想使用它。

【讨论】：

感谢您的帮助。我会看那篇文章。