8

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

4

2 回答 2

13

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

例如

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

于 2016-05-13T09:27:28.607 回答
7

我没用，只是最后一条规则被 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;     
}

请参阅此小提琴以获取工作演示。

我不确定浏览器的差异来自哪里，或者哪个是“正确的”。标签和伪类的类似实验在FF 和 Chrome 中显示了相同的行为：如果元素的选择器更具体，两者都将忽略伪类颜色（如果你按照我上面建议的方式进行相同的更改，你会得到相同的结果（预期?) Chrome 和 FF 中的行为）。a:hover

于 2012-12-23T20:14:25.830 回答