1

我无法让这个占位符在 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

仍然希望修复，但我怀疑可能，因为当两者单独应用时它工作正常。不再是真正的问题，但有点烦人。

4

2 回答 2

9

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

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

于 2012-07-12T19:33:24.477 回答
3

发布这个问题已经有一段时间了，但是除了 Gerve 的回答之外，应该使用::-moz-placeholderFirefox 19+：http ://mzl.la/15FPlx6并且可以添加对 IE10 的支持:-ms-input-placeholder。所以最终的代码将如下所示：

.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;
}
于 2013-02-24T06:54:43.783 回答