Firefox 占位符颜色更改答案

【问题标题】：Firefox placeholder color changesFirefox 占位符颜色更改
【发布时间】：2012-04-01 04:42:39
【问题描述】：

我很惊讶这在 Firefox 中不起作用（在 Chrome 和 Firefox 上尝试：http://jsfiddle.net/YzkSx/）：

<!doctype html>  
<html>  
<head>  
  <title>Placeholder demo</title>  
  <style type="text/css">
      input {color: red}
  </style>  
</head>  
<body>  
  <input id="test" placeholder="Placeholder text!">  
</body>  
</html>

因为我对输入应用了红色，所以占位符最终也是红色的。在 Chrome 和 Safari 中，如果我为输入“着色”，占位符不受影响。

我知道 :moz-placeholder 伪类，但如果我只想在用户开始输入时为输入应用不同的颜色，我似乎不必为此烦恼。

感谢您的帮助！

【问题讨论】：

我认为没有 elegan 解决方案可以做到这一点。查看相关stackoverflow.com/questions/2610497/…

标签： css html firefox

【解决方案1】：

这实际上是一个有意识的实现选择（以及占位符样式是伪类而不是伪元素的原因）。 WebKit 方法的问题在于，如果您使用占位符设置输入的颜色和背景样式，WebKit 将应用背景颜色而不是颜色样式，并且占位符文本很容易变得不可读。当然，您可以使用特定于占位符的样式来解决这个问题，但人们通常会忘记这样做。

【讨论】：

【解决方案2】：

对于 Firefox，您必须使用它们的样式，因为这就是浏览器呈现的方式。又一个迹象表明，FF 与维护“除 IE 之外的所有人都使用的标准”脱节了。您可以按如下方式轻松完成：

input: { 
    color: red;
}
input:-moz-placeholder {  
    color: #a1a1a1;  
}

只要浏览器继续争夺对“标准”的控制权，这将一直是个问题。不幸的是，IE 和 FF 都在用他们所拥有的一切来对抗 webkit，但正如在过去的更新中所看到的那样，FF 最终可能会出现，至于 IE ....

【讨论】：

目标应该是“每个人都使用一种标准”，而不是“每个人都使用一种标准，除了 IE 使用另一种标准”。目标应该倾向于“标准是有意义的东西”，而不一定是“标准是某人首先发布的东西”。在这种情况下，WebKit 正在做一些有一些严重缺陷的事情（而且他们还没有提出标准化的建议）。 Mozilla 正在做的事情有一系列不同的缺点（同样尚未提议标准化）。一旦人们弄清楚如何明智地做到这一点，就应该标准化。

【解决方案3】：

也许你可以用

达到几乎同样的效果

input { color: ... }
input:focus { color: ... }

不使用-moz-placeholder。

【讨论】：

【解决方案4】：

你必须记住兄弟，HTML5 还不是标准，所以你会得到一堆奇怪的小错误。但是，如果可以的话，我不会通过输入元素中的占位符看到任何红色文本。

【讨论】：

【解决方案5】：

目前，大多数跨浏览器、可靠且面向未来的占位符文本样式的方法是使用 JavaScript 删除本机 placeholder 属性，并使用 JS 模拟相应的功能。

如果您不需要设置占位符文本本身的样式，:focus 伪类可能就足够了。

【讨论】：