moz-placeholder 在 Firefox 中不起作用

Posted 2023-03-05

【中文标题】moz-placeholder 在 Firefox 中不起作用

【英文标题】：moz-placeholder does not work in Firefox

【发布时间】：2012-12-10 11:04:46

【问题描述】：

请查看下面的代码，占位符的 CSS 在 Firefox（最新版本）中不起作用，但在 Chrome 中可以正常工作。如何为 Firefox 修复它？

字段有多种输入颜色，但占位符我只有一种颜色，所以我不想在 moz-placeholder 属性中指定任何类名，以便它适用于所有输入字段。

HTML：

<div class="row">
    <input type="text" placeholder="some text asdf" value="" />
</div>

CSS：

::-webkit-input-placeholder  color:red; 
::-moz-placeholder  color:red; 
input:-moz-placeholder  color:red; 

.row input[type="text"]
     color: blue;     

演示： http://jsfiddle.net/C6fjh/

【参考方案1】：

在某些情况下，与 Chrome 或 IE 相比，Mozilla 中的红色会显示得更浅。在这种情况下，您也需要添加 opacity:1 。

例如

:-moz-placeholder color: red; opacity:1; ::-moz-placeholder color: red; opacity:1;

【讨论】：

opacity:1; 是我所缺少的。谢谢

【参考方案2】：

我没用，只是最后一条规则被 Firefox 认为更具体。试试这个：

::-webkit-input-placeholder  color:red; 
.row input[type="text"]::-moz-placeholder  color:red; 
.row input[type="text"]:-moz-placeholder  color:red; 

.row input[type="text"] 
     color: blue;     

请参阅this fiddle 以获得工作演示。

我不确定浏览器的差异来自哪里，或者哪个是“正确的”。带有 a 标记和 :hover 伪类的 similar experiment 在 FF 和 Chrome 中显示相同的行为：如果元素的选择器更具体（并且如果您按照我的建议进行相同的更改，则两者都将忽略伪类颜色上面你在 Chrome 和 FF 中得到相同的(expected?) behavior）。

【讨论】：

选择器:-moz-placeholder 是一个伪类，所以组合选择器将input 元素匹配为真实元素（处于占位符显示状态），但在原始CSS 代码中，该元素具有它的颜色由具有更具体选择器的规则设置。相反，::-webkit-input-placeholder 是一个伪元素，仅对应于占位符文本。 Firefox 即将移动以使用伪元素作为占位符，请参阅developer.mozilla.org/en-US/docs/CSS/:-moz-placeholder

另一个提示，如果您需要正确显示颜色，请添加：'opacity: 1;'我使用的是 FF 20.0.1，它会将占位符调暗到低于 100% 的不透明度。尝试将背景颜色设置为“黑色”并查看它是否显示为灰色。不透明度：1，是真正的黑色。

谢谢你，尼尔，这让我发疯了。我从没想过要应用不透明度：1.

@NeilMonroe，我知道这是一个古老的主题，但你的答案是正确的。也许您应该将其解释为答案而不是评论。似乎即使是新版本的 Firefox 也降低了占位符的不透明度，所以颜色的差异是由于它。顺便说一句：opacity: 1 进入 ::moz-placeholder 选择器非常适合我。

@NeilMonroe 如果您愿意，请随时建议将其作为我的答案的编辑。