Change a HTML5 input s placeholder color with CSS

Question

On input[type=text] elements in Chrome, the placeholder property is supported (others probably do too).

However, the following CSS has no effect on the placeholder's value:

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

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

However, Value will remain grey rather than red.

Is there a way to make the placeholder text a different colour?

Answer 1

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

A pseudo-element:::-webkit-input-placeholder is used by WebKit, Blink (Safari, Google Chrome, Opera 15+), and Microsoft Edge. [Ref] Mozilla Firefox 4–18 employs the pseudo-class::-moz-placeholder (one colon). [Ref] Mozilla Firefox 19+ employs a pseudo-element:::-moz-placeholder, but the previous selector will continue to function for the foreseeable future. [Ref]
In Internet Explorer 10 and 11, a pseudo-class::-ms-input-placeholder is used. [Ref]
April 2017: The simple pseudo-element::placeholder is supported by the majority of current browsers. [Ref]
Internet Explorer 9 and earlier do not support the placeholder attribute, and Opera 12 and earlier do not allow any CSS selector for placeholders.

The debate about the appropriate method of implementation is still ongoing. In the Shadow DOM, the pseudo-elements behave like real elements.