为什么Firefox会改变我的输入/占位符颜色？

Question

我已经尽一切努力使Firefox使用我指定的颜色作为我表格上占位符的颜色。包括使用 :-moz-placeholder 在我的CSS和所有内容中，生成的颜色从来都不是我指定的。

我知道Firefox使用默认输入/占位符颜色的轻质灰色A，但是如果它没有真正完全更改它，为什么还可以选择它呢？

这是我为演示的代号，包括所有Firefox特定的CSS：

老的： http://codepen.io/jtlr/pen/bpjft

新的： http://codepen.io/jtlr/pen/ekjhh

Answer 1

Firefox中的默认占位符样式是：

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 0.54;
}

根本没有任何颜色样式（参考是 http://hg.mozilla.org/mozilla-central/file/a07aebef20e7/layout/style/style/forms.css#l160）。这很重要，因为如果您只是设置 color 和 background 在您的输入上，并且没有任何特殊占位符样式，它会拾取您设置的颜色，但只会使其看起来更褪色。

因此，如果您想完全重新安排占位符，请将其不透明度设置为1。

Answer 2

Firefox 19+需要2个结肠。::

所以使用 ::-moz-placeholder

::-Moz-place持有人的伪元素被引入以替代：-moz-place所有者伪级，已在Firefox 19中删除了。

而不是 :-moz-placeholder

：-moz-placeholder伪级将被贬低，以抗拒::-moz-placehphorder pseudo-element in Firefox 19。

工作codepen示例 - 仅FF。

::-moz-placeholder {
  color:red;
}

除此之外，这是一个选择者，而不是财产。所以，

p { :-moz-placeholder: #000000; }

是不正确的。