Moz-Place持有人在Firefox中不起作用

Question

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

Answer 1

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

，例如

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

Answer 2

i'ts有效，只是最后一个规则被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 TAG和:hover伪类类的类似实验在FF和Chrome中都显示出相同的行为：如果元素的选择器更具体（并且，如果您对上面的相同的更改，则会忽略伪类颜色（预期？）Chrome和ff中的行为）。