Grouping placeholder color styling

Question

How come this works:

input { color: #807E82; }
input:-moz-placeholder { color: #807E82; }
input::-moz-placeholder { color: #807E82; }
input:-ms-input-placeholder { color: #807E82; }
input::-webkit-input-placeholder { color: #807E82; }

But this doesn't:

input,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::-webkit-input-placeholder { color: #807E82; }

Seems a bit of a pain if I want to change all the input colors and placeholder colors on the quickly.

did you checked http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css — G.L.P, Jun 27 '14 at 12:33

score 3 · Accepted Answer · answered Jun 27 '14 at 12:36

3

That's because how CSS error handling works: if a single rule in a selector is invalid (not recognized by a user agent, to be precise), the whole selector and its rule is discarded by a user agent.

In the second example, each browser will have its own indigestible part of the selector (Firefox won't know anything about -ms-input..., Chrome and IE - about -moz-... etc). So the whole rule will be ignored.

answered Jun 27 '14 at 12:36

raina77ow

103,633
15
192
229

Aaah right I never knew that. Seems crazy the browser can't understand what is relevant to it? It can differentiate between vendor prefixes like -moz -webkit etc. so why not this? Fair enough though, if that's the rules then that's it – CaribouCode Jun 27 '14 at 12:37
@Cooper I'd suggest checking [this thread](http://stackoverflow.com/questions/13816764/what-is-the-rationale-behind-dropping-css-rules-with-an-invalid-selector) as well. In short, it's not as easy as it seems to make a distinction between 'wrong' and 'irrelevant' without breaking things both in past and in future. ) – raina77ow Jun 27 '14 at 12:38

Grouping placeholder color styling

1 Answers1