moz-placeholder在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中显示的颜色更浅。在这种情况下，您还需要添加opacity：1。

例如

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

Answer 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;     
}

看一下工作演示的小提琴.

我不确定浏览器的不同之处,或者哪个是"正确的".一个类似的实验与a标签和:hover伪类是分别用FF和Chrome相同的行为:既会忽略伪类的颜色,如果该元素的选择是更具体的(如果你做同样的变化,我建议你上面得到相同的(预期？) Chrome和FF中的行为).