Change the placeholder color of an HTML input using CSS

Question

Chromev4 supports placeholder attributes on input[type=text] elements (others may do the same). However, the following CSS does nothing with the placeholder's value: input[placeholder],[placeholder],*[placeholder]{color:red!important;}<inputtype="text"placeholder="Value"&gt

P粉680087550 · Answer

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

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).

P粉765684602 · Answer

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