Why do comma separated placeholder rules not get applied in css?

Question

If I apply the following rule to an input element with id #one then the placeholder color will change,

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

But if I use comma separater to combine placeholder rules of different browsers then the color doesn't apply, e.g.

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

Working example:

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

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

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

Why does the #two placeholder not change its color to red?

Malacca

Answer 1

This is because a browser will only apply a rule form a selector it can fully interpret.
For a webkit type browser -webkit-input-placeholder is valid but -moz-placeholder is not, so it trashes the entire selector, and vise-versa for a geeko based browser.
The solution is to separate browser specific selectors.

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

Noreen

Would you be able to give reference from w3c or mdn for this behaviour please? – Malacca

Answer 2

I know it is now a complete answer, but you could add different classes for each input

#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">

Scutter

Why should I do this? – Malacca

Musa has the correct answer and explanation..I inspected the shadow dom and everything is working as expected – Scutter