Question

我已经尝试了一切让Firefox使用我指定的颜色作为表单上占位符的颜色。包括在我的CSS中使用:-moz-placeholder以及所有颜色都不是我指定的颜色。

我知道Firefox使用浅灰色作为其默认输入/占位符颜色，但为什么有一个选项可以更改它，如果它没有真正完全改变它？

这是我用来演示的代码包，包括所有特定于Firefox的CSS：

旧：http://codepen.io/JTLR/pen/BpJft

新：http://codepen.io/JTLR/pen/EkJhH

Answer 1

Firefox 19+需要2个冒号.. ::

因此请使用::-moz-placeholder

引入了:: - moz-placeholder伪元素，以替代在Firefox 19中弃用的：-moz-placeholder伪类。

而不是:-moz-placeholder

：-moz-placeholder伪类将被弃用，以支持Firefox 19中的:: - moz-placeholder伪元素。

Working CodePen example - 仅限FF。

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

除此之外，这是一个选择器，而不是属性。因此，

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

不正确。

Answer 2

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

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

根本没有任何颜色样式（引用是http://hg.mozilla.org/mozilla-central/file/a07aebef20e7/layout/style/forms.css#l160）。这很重要，因为这样一来，如果你只是在你的输入上设置color和background，并且没有任何特殊的占位符样式，那么它将会选择你设置的颜色，但只是让它看起来更像淡出了。

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

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

2 个答案: