HTML5: Change placeholder input color with CSS

Implementation to change placeholder color

There are three different implementations: pseudo-elements, pseudo-classes, and nothing.

• WebKit and Blink (Safari, Google Chrome, Opera 15+) are using a pseudo-element: ::-webkit-input-placeholder.
• Mozilla Firefox 4 to 18 is using a pseudo-class : :-moz-placeholder (one colon).
• Mozilla Firefox 19+ is using a pseudo-element: ::-moz-placeholder, but the old selector will still work for a while.
• Internet Explorer 10 is using a pseudo-class : :-ms-input-placeholder.

IE up to version 9 and Opera up to version 12 do not support any CSS selector for placeholders.

The discussion about the best implementation is still going on. Note the pseudo-elements act like real elements in the Shadow DOM. A padding on an input will not get the same background color as the pseudo-element.

CSS selectors

User agents are required to ignore a rule with an unknown selector. See Selectors Level 3:

a group of selectors containing an invalid selector is invalid.

So we need separate rules for each browser. Otherwise the whole group would be ignored by all browsers.

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

Usage notes

• Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
• Note that 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. Don’t forget translations: some languages need more room for the same word.
• Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
• Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:

    [type="search"] {

        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

Read More