占位符在Firefox中不起作用

2018-06-25 04:32:27

请参阅下面的代码，占位符的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/

我不工作，只是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;     
}

看到这个小提琴的演示。

我不确定浏览器的差异来自哪里，或者哪个是“正确的”。类似的实验用a标签和:hover伪类是分别用FF和Chrome相同的行为：既会忽略伪类的颜色，如果该元素的选择是更具体的（如果你做同样的变化，我建议你上面得到的Chrome和FF中的相同（预期？）行为）。

在某些情况下，与Chrome或IE相比，Mozilla中的红色显示更亮。在这种情况下，您还需要添加不透明度：1。

例如

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

链接地址: http://www.djcxy.com/p/70523.html

上一篇: placeholder does not work in Firefox

下一篇: How do I stop Chrome from yellowing my site's input boxes?