Styling input placeholder (default and focus state) in Chrome 42

Question

I'm trying to style a placeholder for input text in Chrome v42 Why does the following code not work in the latest version of Chrome?

Or rather what is the fix?

https://jsfiddle.net/5osszauf/

Note: I'm fully aware there's cross browser CSS. Please ignore.

<input type="text" placeholder="fefg3f">

input::-webkit-input-placeholder, input:focus::-webkit-input-placeholder, input:focus:-moz-placeholder, input:focus::-moz-placeholder, input:focus:-ms-input-placeholder {
            color: #000;
        }

EDIT: I took the code from the stackoverflow post

How to change placeholder color on focus?

If in answer is provided it might be worth updating the answer for this post also?

the fix is to duplicate the rule, one for each vendor: https://jsfiddle.net/5osszauf/1/ — Fabrizio Calderan, Apr 28 '15 at 16:19
Oh... is this because browsers invalidate all selectors if one doesn't work? — lejimmie, Apr 28 '15 at 16:20
That is unfortunate indeed. (oh the pitfalls of web!) thanks for your help. Not sure if this question is worth giving an answer to about invalid selectors... I imagine more devs (who are learning) would fall for this — lejimmie, Apr 28 '15 at 16:24
@scdr - I didn't see this post however I think this question while covers the same topic does have differences — lejimmie, Apr 28 '15 at 16:25
it's answered there - a group of selectors containing an invalid selector is invalid. — Stickers, Apr 28 '15 at 16:28

score 0 · Accepted Answer · answered Apr 28 '15 at 18:08

If you have a list of comma seperated selectors like that and a browser doesn't recognise even one of those selectors it will ignore all selectors in that list.

In your example, the -moz prefix for Firefox will not be recognised by Chrome.

The fix is to create separate rules for each different prefix.

score 0 · Answer 2 · edited Apr 29 '15 at 06:09

0

I think this code will work:

input[type="text"]::-webkit-input-placeholder {
   color: #fff;
}

edited Apr 29 '15 at 06:09

shA.t

16,580
5
54
111

answered Apr 29 '15 at 05:25

Alias Varghese

2,104
3
24
52

Styling input placeholder (default and focus state) in Chrome 42

2 Answers2