我的文本输入占位符拒绝在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;
}
发布于 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;
并调整顶部和底部填充。
发布于 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;
}
发布于 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;
}
https://stackoverflow.com/questions/20507731
复制相似问题