Change the placeholder color of an HTML input using CSS

Question

Chrome v4 supports placeholder attributes on the input[type=text] element (others may do the same).

However, the following CSS does nothing with the placeholder value:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

The

value will remain grey instead of red.

Is there a way to change the color of the placeholder text?

Answer 1

/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}

<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

This will style all input and textarea placeholders.

Important Note: Do not group these rules. Instead, make separate rules for each selector (an invalid selector in a group invalidates the entire group).

Answer 2

Implementation

There are three different implementations: pseudo-element, pseudo-class and none.

• WebKit, Blink (Safari, Google Chrome, Opera 15) and Microsoft Edge use the pseudo-element: ::-webkit-input-placeholder. ^{[refer to]}
• Mozilla Firefox 4 to 18 uses pseudo-class: :-moz-placeholder (a colon). ^{[refer to]}
• Mozilla Firefox 19 uses the pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. ^{[refer to]}
• Internet Explorer 10 and 11 use pseudo-class: :-ms-input-placeholder. ^{[refer to]}
• April 2017: Most modern browsers support simple pseudo-element ::placeholder ^[Ref]

Internet Explorer 9 and lower does not support the placeholder attribute at all, and Opera 12 and lower does not support any placeholder CSS selector.

Discussions on best implementation options continue. Note that pseudo-elements behave just like real elements in the shadow of the DOM. The padding on input will not get the same background color as the pseudo element.

CSS Selector

User agents are required to ignore rules with unknown selectors. SeeSelector Level 3:

So we need to develop separate rules for each browser. Otherwise the entire group will be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}

<input placeholder="Stack Snippets are awesome!">