Question

我正在尝试将占位符设置为输入样式。此规则适用于FF和Chrome：

.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder {
     color: tomato;
 }

但是，如果我尝试使用MS或webkit的供应商前缀让它在Edge中工作（我读到Edge响应webkit前缀的地方）：

.b-required-missing input[type="text"]::-ms-input-placeholder,
.b-required-missing input[type="email"]::-ms-input-placeholder,
.b-required-missing textarea::-ms-input-placeholder,
.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder{
    color: tomato;
}

这在firefox中打破了它，即使我放了-moz-供应商前缀。如何在所有3种浏览器中使用它？

http://jsfiddle.net/vc8V4/516/

Answer 1

如果规则无效，浏览器会忽略该样式。

因此，-moz-在Chrome中无效。

不使用单一规则，而是为每个前缀使用不同的内容：

.b-required-missing input[type="text"]::-ms-input-placeholder,
.b-required-missing input[type="email"]::-ms-input-placeholder,
.b-required-missing textarea::-ms-input-placeholder {
    color: tomato;
}

.b-required-missing input[type="text"]::placeholder,
.b-required-missing input[type="email"]::placeholder,
.b-required-missing textarea::placeholder{
    color: tomato;
}

这样第一条规则将失败，然后第二条规则将被应用

供应商前缀导致css失败

1 个答案: