Changing an input's HTML5 placeholder color with CSS does not work on Chrome

Question

I tried to follow the following topic, but unsuccessfully. Change an HTML5 input's placeholder color with CSS

I tried to colorize my placeholder, but it still stay grey on Chrome 17.0.963.56 m.

HTML

<input type='text' name='test' placeholder='colorize placeholder' value='' /> 

CSS

INPUT::-webkit-input-placeholder,  INPUT:-moz-placeholder {     color:red; } input[placeholder], [placeholder], *[placeholder] {     color:green !important; } 

JSfiddle

• http://jsfiddle.net/F4xfV/1/

On Firefox 10.0.2, it works well.

Answer 1

You forget a :. Because of that, the whole selector got corrupted and didn't work. http://jsfiddle.net/a96f6/87/

Edit: Seems like (after an update?) this doesn't work anymore, try this:

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

Note: don't mix the vendor prefix selectors (-moz, -webkit, -ms, ...). Chrome for example won't understand "-moz-" and then ignores the whole selector.

Edit for clarification: To make it work in all browsers, use this code:

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

​

Answer 2

As @Alex said, for some reason you can't combine the selectors for multiple browsers.

This will work

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

But this won't work (in Chrome at least):

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

Looks like a browser implementation quirk to me.

Also, note that you don't have to define placeholder styles globally, you can still scope the ::placeholder selector just like you normally do. This works:

.my-form .input-text::-webkit-input-placeholder {     color:red; }  .my-form .input-text::-moz-placeholder {     color:red; }