Firefox 23.0.1 Chrome 23.0.1271.64 和 IE 8 之间占位符的字体颜色差异

Posted 2023-03-05

【中文标题】Firefox 23.0.1 Chrome 23.0.1271.64 和 IE 8 之间占位符的字体颜色差异

【英文标题】：Font color of placeholder difference between Firefox 23.0.1 Chrome 23.0.1271.64 and IE 8

【发布时间】：2013-08-27 06:26:49

【问题描述】：

我将输入字段的占位符字体颜色更改为蓝色，我在 Chrome 中对其进行了测试，它的颜色是蓝色。但在 FF 23.0.1 中，颜色比蓝色稍微“浅”。

请看下面的对比，注意“月份”在一个范围内，颜色也是蓝色：

在 Chrome 中，这很好，见下文：

但是，在 Firefox 23.0.1 中，看起来像这样：

在 IE8 中，不显示：

注意颜色的区别。

下面是我使用的css代码：

.month_span  color: blue; 
.input::-webkit-input-placeholder  color:blue
.input::-moz-placeholder  color:blue;  /* FF 19+ */
.input:-moz-placeholder  color:#bbb;  /* FF 18- */
.input:-ms-input-placeholder  color:#bbb; 

我的问题：1。为什么FF的颜色更浅？ 2. 如何在IE中显示占位符值？

【问题讨论】：

样式输入总是令人沮丧的体验。特别是如果您试图使它们在浏览器中看起来相同。这是一项勇敢的努力，但实际上，我不会在这上面浪费太多时间。

哦，我看到你说的是IE8。根据MDN的说法，占位符只支持IE10及以上版本。

你觉得色差有什么原因吗？

可能是浏览器设置颜色后文字变灰了。我不确定。

【参考方案1】：

在 IE 10 之前，IE 不支持 placeholder 属性，所以这就解释了这一点。

Firefox 显然将 opacity:0.54 应用于占位符文本： http://css-tricks.com/snippets/css/style-placeholder-text/

这将解决：

.input::-moz-placeholder  color:blue; opacity: 1;  /* FF 19+ */
.input:-moz-placeholder  color:#bbb; opacity: 1;  /* FF 18- */

【讨论】：

谢谢！这很有用！解决了！

注意：目前FF中占位符的默认不透明度为0.4 - developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder