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

Posted 2023-03-05

【中文标题】为啥 Firefox 会改变我的输入/占位符颜色？

【英文标题】：Why is Firefox altering my input/placeholder colours?为什么 Firefox 会改变我的输入/占位符颜色？

【发布时间】：2013-11-19 17:05:57

【问题描述】：

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

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

这是我制作的一个代码笔，用于演示包括所有 Firefox 特定的 CSS：

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

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

【问题讨论】：

相关：***.com/q/2610497/266535

【参考方案1】：

这是 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。

【讨论】：

所以改变不透明度可以解决问题！ codepen.io/JTLR/pen/EkJhH 太棒了。正是我想要的！

【参考方案2】：

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; 

不正确。

【讨论】：

对不起，我确实知道，只是一个假人！我现在修改了我的笔，如您所见，颜色仍然不同。