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

Question

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

• http://jsfiddle.net/F4xfV/1/

On Firefox 10.0.2, it works well.

Depoliti

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. – Tiny

!important did the trick for me. Without that, the placeholder text colour remained frustratingly unchangeable, even while other font attributes could be changed. – Esplanade

Possible duplicate of Change an input's HTML5 placeholder color with CSS – Viscous

@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. – Depoliti

Answer 1

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

​

Mopboard

Thanks ! your were right. New rules are : input::-webkit-input-placeholder, input::-moz-placeholder { color:red; } – Depoliti

Isn’t that input:-moz-placeholder { color:red; } instead? That’s what’s in the other thread. Also, do not put both selectors in one rule. – Saval

placeholder color is not red in my chrome 29.0.1547.57 – Petrina

css code still works for me, but the fiddle was outdated. jsfiddle.net/a96f6/87 – Mopboard

Note to add to this answer is Firefox 19+ placeholder is: input::-moz-placeholder { color: red;} notice the additional :. – Husch

"Don't mix the vendor prefix" - this tripped me up for HOURS! – Mord

@iciPiracy: I successfully tested the fiddle in Chrome, Safari and Firefox. Sadly no Edge/IE available. In what browsers do you encounter problems? – Mopboard

@Dmitry please don't make substantive edits to the code of another user's answer. Add your own answer, instead! – Pellegrino

@Pellegrino sorry, I just thought my addition was more like comment on another answer, so I decided to amend an existing answer – Lubricant

Added a separate answer. It now duplicates part of this answer in order to provide context. – Lubricant

Don't put them all together, separated by commas, it doesn't seem to work. I encounter issues with Firefox and later when I separate them as shown above, they work as they were supposed to. – Dodecanese

You provided a better answer than w3schools :D w3schools.com/howto/howto_css_placeholder.asp – Strophic

Answer 2

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

Lubricant

thanks for mentioning what won't work, thats where i was screwing up – Bakemeier

Does anyone know why the first way doesn't work? I thought that was just really common css syntax. So confused – Wiltz

Additionally, this will NOT work either (in Chrome at least): .my-form .input-text::-webkit-input-placeholder, .my-second-form .input-text::-webkit-input-placeholder { color: red; } – Vitric

Answer 3

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

Faintheart

No other answer was working for me! This placeholder thing is weird... can't combine vendor-prefixed selectors, can't use named colors... – Jadejaded

What I noticed was that firefox lightens the color you choose. If you choose red it looks a bit pink, not the bright red that red would usually be. – Adalbert

Answer 4

::-webkit-input-placeholder {
    color: #008000;
}

Loci