文本输入占位符在IE和Firefox中不显示
文本输入占位符在IE和Firefox中不显示
提问于 2013-12-11 07:42:55
我的文本输入占位符拒绝在IE和Firefox中显示，尽管使用了-moz-placeholder属性。如果你使用的是火狐或IE，你可以通过on the contact page here查看。
有没有人能帮帮我我已经试了好几个星期了。下面是我的代码示例：
input::-moz-placeholder, textarea::-moz-placeholder {
color: #aaa;
font-size: 18px;
}
input:-ms-input-placeholder, textarea::-ms-input-placeholder {
color: #aaa;
font-size: 18px;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #aaa;
font-size: 18px;
}回答 4
Stack Overflow用户
回答已采纳
发布于 2015-01-22 19:37:23
正如luke2012所说，当在文本类型的输入字段上使用box-sizing: border-box;时，就会发生这种情况。然而，这仅在使用固定高度(例如在Bootstrap框架中)且顶部和底部填充过多时才会发生。这不仅阻止占位符文本显示，而且还可以在Firefox中输入文本。
我发现更好的解决方案是保留box-sizing: border-box;，而不是删除顶部和底部填充，并将高度增加到您希望输入字段具有的总高度(包括任何边框)。
input[type="email"], input[type="password"], input[type="text"]
{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 42px; // Increase height as required
margin-bottom: 30px;
padding: 0 20px; // Now only left & right padding
}这使事情更加一致，并在Bootstrap等框架上工作得很好。
或者，您可以根据需要增加固定高度或设置height: auto;并调整顶部和底部填充。
Stack Overflow用户
发布于 2013-12-11 08:06:10
::-webkit-input-placeholder { /* Chrome, Safari */
color: #aaa;
font-size: 18px;
}
:-moz-placeholder { /* Firefox 18- */
color: #aaa;
font-size: 18px;
}
::-moz-placeholder { /* Firefox 19+ */
color: #aaa;
font-size: 18px;
}
:-ms-input-placeholder { /* Internet Explorer */
color: #aaa;
font-size: 18px;
}Stack Overflow用户
发布于 2013-12-11 08:05:26
看起来是-moz-box-sizing导致了你的问题。
input[type="email"], input[type="password"], input[type="text"]
{
-moz-box-sizing: border-box; // remove this line
height: 25px;
margin-bottom: 30px;
padding: 20px;
}删除该行将严重影响您的输入大小，因此您可以在CSS中添加一个调整框大小的通用规则。
*, *:before, *:after {
-moz-box-sizing: border-box;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20507731
复制相关文章
相似问题