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
On Firefox 10.0.2, it works well.
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; }
input::-webkit-input-placeholder, input::-moz-placeholder { color:red; }
input:-moz-placeholder { color:red; } instead? That’s what’s in the other thread. Also, do not put both selectors in one rule.
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; } 
.my-form .input-text::-webkit-input-placeholder, .my-second-form .input-text::-webkit-input-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; } 
::-webkit-input-placeholder { color: #008000; } 
!important, or make sure everything cascades as intended.!importantdid the trick for me. Without that, the placeholder text colour remained frustratingly unchangeable, even while other font attributes could be changed.