Question

如果我将以下规则应用于标识为#one的输入元素，则占位符颜色将会更改，

#one::-webkit-input-placeholder {
  color: red;
}

但是，如果我使用逗号分隔符来组合不同浏览器的占位符规则，那么颜色不适用，例如

#two::-webkit-input-placeholder,
#two::-moz-placeholder{
  color: red;
}

工作示例：

＆＃13;

#one::-webkit-input-placeholder {
  color: red;
}

#two::-webkit-input-placeholder,
#two::-moz-placeholder{
  color: red;
}

＆＃13;

<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">

＆＃13;

为什么#two占位符不会将其颜色更改为红色？

Answer 1

这是因为浏览器只会将规则应用于可以完全解释的选择器对于webkit类型的浏览器-webkit-input-placeholder是有效的，但-moz-placeholder不是，因此它会破坏整个选择器，反之亦然，基于geeko的浏览器。
解决方案是分离浏览器特定的选择器。

#two::-webkit-input-placeholder{
  color: red;
}
#two::-moz-placeholder{
  color: red;
}

Answer 2

我知道它现在是一个完整的答案，但您可以为每个输入添加不同的类

#one::-webkit-input-placeholder {
  color: red;
}



#two::-webkit-input-placeholder{
  color: red;
}
#two::-moz-placeholder{
  color: red;
}

<input id="one" type="text" placeholder="one">
<input id="two" type="text" placeholder="two">

为什么逗号分隔占位符规则不能在css中应用？

2 个答案: