Change an HTML5 input's placeholder color with CSS

Question

Chrome supports the placeholder attribute on input[type=text] elements (others probably do too).

But the following CSS doesn't do anything to the placeholder's value:

input[placeholder], [placeholder], *[placeholder] {

    color: red !important;

}

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

Value will still remain grey instead of red.

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

Answer 1

Implementations for different browsers are mentioned below:

Three different implementations are as follows:

pseudo-elements, pseudo-classes, and nothing.

• Mozilla Firefox 4 to 18 is using a pseudo-class: :-moz-placeholder (one colon). [Ref]
• Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while. [Ref]
• Internet Explorer 9 and lower does not support the placeholder attribute at all, while Opera 12 and lower do not support any CSS selector for placeholders.
• Internet Explorer 10 and 11 are using a pseudo-class: :-ms-input-placeholder. 
• WebKit, Blink (Safari, Google Chrome, Opera 15+) and Microsoft Edge are using a pseudo-element: ::-webkit-input-placeholder.  ^[Ref]

Note:  the pseudo-elements will act like real elements in the Shadow DOM. Padding on the input will not get the same background color as the pseudo-element.

CSS selectors

User agents will be required to ignore a rule with an unknown selector. 

See Selectors Level 3:

A group of selectors containing an invalid selector is invalid.Therefore, you need separate rules for different browsers. Otherwise, the whole 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="Web snippets are awesome!">

 Key points:

Try to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so you need to use opacity: 1 here.

Note :

The placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings.

Browsers with HTML support for placeholder but without CSS support for that (like Opera) need to be tested. A few browsers will use additional default CSS for some input types like email, search. But, these may affect the rendering in unexpected ways. You can use the properties -webkit-appearance and -moz-appearance to change that. 

For example:

    [type="search"] {

        -moz-appearance:    textfield;

        -webkit-appearance: textfield;

        appearance: textfield;

    }