Question

我无法让这个占位符在Firefox 13.0.1中正确设置样式

我有一个带占位符的输入字段：

<input class="textFieldLarge" placeholder="Username" id="username" name="username" type="text" />

我有这个CSS：

.textFieldLarge{
    width:400px;
    height:50px;
    line-height:50px;
    padding-left:5px;
    padding-right:5px;

    background:none;
    background-color:#FFF;
    border:solid 1px #BBB;

    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
    color:#333;
}

.textFieldLarge::-webkit-input-placeholder, .textFieldLarge:-moz-placeholder{
    font-style:italic;
    color:#BBB;
}

这应该设置文本字段＃333和占位符#BBB斜体的样式。我有这个与chrome和IE一起工作，但无法想出FF。

编辑，发现我申请的问题:: - webkit-input-placeholder同时

仍然会欣赏修复，但我怀疑是否可行，因为它们在单独应用时都能正常工作。不再是一个真正的问题，但有点烦人。

Answer 1

如果选择器的某个部分无效，则整个选择器将无效。

因此，-moz-和-webkit-每个人都需要有两个不同的规则。

Answer 2

发布此问题已经有一段时间了，但除了Gerve的回答之外，还应该使用::-moz-placeholder用于Firefox 19+：http://mzl.la/15FPlx6，并且可以使用:-ms-input-placeholder添加对IE10的支持。所以最终的代码看起来像这样：

.textFieldLarge::-webkit-input-placeholder {
  font-style:italic;
  color:#BBB;
} 

.textFieldLarge:-moz-placeholder {
  font-style:italic;
  color:#BBB;
}

.textFieldLarge::-moz-placeholder { /* Firefox 19+ */
  font-style:italic;
  color:#BBB;
}

.textFieldLarge:-ms-input-placeholder { /* IE10 */
  font-style:italic;
  color:#BBB;
}

Firefox -moz-placeholder，不工作

2 个答案: