0

I have this HTML:

<input type="text" class="example" placeholder="Example"><br><br>
<input type="text" class="example" placeholder="Example"><br><br>
<input type="text" class="example" placeholder="Example"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>

When I use this CSS, it works (https://jsfiddle.net/sv1sqgq4/1/):

.example::-webkit-input-placeholder {
    color: red;
}
.example:-moz-placeholder {
    color: red;
}
.example::-moz-placeholder {
    color: red;
}
.example:-ms-input-placeholder {
    color: red;
}

But, when I do it like this, it's not working (https://jsfiddle.net/sv1sqgq4/):

.example::-webkit-input-placeholder,
.example:-moz-placeholder,
.example::-moz-placeholder,
.example:-ms-input-placeholder {
    color: red;
}

How do I refactor this CSS? Am I missing something?

Zulhilmi Zainudin
  • 7,985
  • 8
  • 44
  • 79

2 Answers2

1

Please see reason here : Why isn't it possible to combine vendor-specific pseudo-elements/classes into one rule set?

Community
  • 1
  • 1
Punit kumar Tripathi
  • 79
  • 4
1

tl;dr: the classes with those pseudo-selectors have to be seperate.

Explanation:

Refactoring the CSS in that way is not possible. It has to do with the way the pseudo elements for the specific vendors work. Since one vendor's browser doesn't "get" the prefixes of the other browsers, it disregards any rules that contain unrecognized prefixes in pseudo-class/element selectors.

From the docs:

4.1.7 Rule sets, declaration blocks, and selectors

When a user agent cannot parse the selector (i.e., it is not valid CSS 2.1), it must ignore the selector and the following declaration block (if any) as well. CSS 2.1 gives a special meaning to the comma (,) in selectors. However, since it is not known if the comma may acquire other meanings in future updates of CSS, the whole statement should be ignored if there is an error anywhere in the selector, even though the rest of the selector may look reasonable in CSS 2.1.

pivemi
  • 708
  • 8
  • 14