67

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.

Community
  • 1
  • 1
el-teedee
  • 1,293
  • 1
  • 15
  • 27
  • 8
    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 Dec 30 '15 at 21:11
  • `!important` did the trick for me. Without that, the placeholder text colour remained frustratingly unchangeable, even while other font attributes could be changed. – Velojet Feb 02 '16 at 22:45
  • Possible duplicate of [Change an input's HTML5 placeholder color with CSS](http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) – fuxia Apr 10 '16 at 13:02
  • @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 Mar 03 '18 at 13:04

4 Answers4

100

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

​

TylerH
  • 20,799
  • 66
  • 75
  • 101
Alex
  • 6,276
  • 2
  • 20
  • 26
  • 1
    Thanks ! your were right. New rules are : `input::-webkit-input-placeholder, input::-moz-placeholder { color:red; }` – el-teedee Feb 27 '12 at 13:30
  • 3
    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. – Michael Piefel Apr 24 '12 at 07:59
  • 4
    placeholder color is not red in my chrome 29.0.1547.57 – wilsonrufus Sep 03 '13 at 07:26
  • css code still works for me, but the fiddle was outdated. http://jsfiddle.net/a96f6/87/ – Alex Nov 10 '13 at 11:18
  • Note to add to this answer is Firefox 19+ placeholder is: `input::-moz-placeholder { color: red;}` notice the additional `:`. – L84 Mar 18 '14 at 23:18
  • 11
    "Don't mix the vendor prefix" - this tripped me up for HOURS! – user3640967 Nov 04 '15 at 12:09
  • @iciPiracy: I successfully tested the fiddle in Chrome, Safari and Firefox. Sadly no Edge/IE available. In what browsers do you encounter problems? – Alex Jun 24 '16 at 15:18
  • @Dmitry please don't make substantive edits to the code of another user's answer. Add your own answer, instead! – TylerH Aug 25 '16 at 21:31
  • @TylerH sorry, I just thought my addition was more like comment on another answer, so I decided to amend an existing answer – Dmitry Pashkevich Aug 25 '16 at 22:39
  • Added a separate answer. It now duplicates part of this answer in order to provide context. – Dmitry Pashkevich Aug 25 '16 at 22:44
  • 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. – acarlstein Oct 21 '20 at 00:20
  • You provided a better answer than w3schools :D https://www.w3schools.com/howto/howto_css_placeholder.asp – David Jul 16 '21 at 18:38
47

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;
}
Dmitry Pashkevich
  • 13,431
  • 9
  • 55
  • 73
  • 19
    thanks for mentioning what **won't** work, thats where i was screwing up – random-forest-cat Dec 28 '16 at 20:05
  • Does anyone know why the first way doesn't work? I thought that was just really common css syntax. So confused – tamj0rd2 Aug 04 '20 at 07:08
  • 2
    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; }` – leendertvb Jun 29 '22 at 13:18
6

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;
}
Sidney Sousa
  • 3,378
  • 11
  • 48
  • 99
  • No other answer was working for me! This placeholder thing is weird... can't combine vendor-prefixed selectors, can't use named colors... – papiro Oct 27 '17 at 05:25
  • 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. – pathfinder Apr 28 '19 at 00:40
1
::-webkit-input-placeholder {
    color: #008000;
}
Michael Christensen
  • 1,768
  • 1
  • 13
  • 11