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

56
votes

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.

4
cssgoogle-chromeplaceholder
If you're using a CSS framework like Bootstrap, they might already have these styles defined, so you have to add !important, or make sure everything cascades as intended. - Kevin Beal
!important did the trick for me. Without that, the placeholder text colour remained frustratingly unchangeable, even while other font attributes could be changed. - Velojet
Possible duplicate of Change an input's HTML5 placeholder color with CSS - fuxia
@fuxia, not a duplicate, since it I started with the question you quote (I quote it too in my question), then I had a problem with, that's why I asked this question. - el-teedee

4 Answers

96
votes

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

​

35
votes

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

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;
}
0
votes
::-webkit-input-placeholder {
    color: #008000;
}