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

我正在工作，只是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。

Answer 2

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

E.g。

DOM

moz-placeholder在Firefox中不起作用

2 个答案: