Changing an input's HTML5 placeholder color with CSS does not work on Chrome
CssGoogle ChromePlaceholderCss Problem Overview
I tried to follow the following topic, but unsuccessfully. https://stackoverflow.com/questions/2610497/change-an-inputs-html5-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.
Css Solutions
Solution 1 - Css
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;
}
Solution 2 - Css
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;
}
Solution 3 - Css
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;
}
Solution 4 - Css
::-webkit-input-placeholder {
color: #008000;
}