el_teedee el_teedee - 5 months ago 12
CSS Question

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

I tried to follow the following topic, but unsuccessfully.
Change an input's 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.

Answer

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

‚Äč