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

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;}

​

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;}

I have just experienced the same problem and thought it would be good to share.For some reason, the color was not changing on firefox and I noticed that its only when I use hexadecimal values so I did it this way for a particular website:

::-webkit-input-placeholder {    color: #666666;}::-moz-placeholder {    color: black;}::-ms-placeholder {    color: #666666;}::placeholder {    color: #666666;}