How to Change an HTML5 Input’s Placeholder Color With CSS

Placeholder Color CSS

Yes, there is a way to change the color of the placeholder text in your HTML5 form inputs. This can be done by using the ::placeholder pseudo-element.

You would generally use it like so:

For backward compatibility, it is good to know that there are some caveats to be aware of.

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

Seeing User agents are required to ignore a rule with an unknown selector, web developers must separate the rules for each browser otherwise the whole group would be ignored by all browsers. See this example:

Note above that the rules for Firefox include opacity. This is because Firefox’s placeholder appears to be showing with reduced opacity, so needs we need to use opacity: 1 here to control it.

SUGGESTED  Qt 3D Studio 1.0 Announced for General Availability

Here is an example of the HTML input affected by the CSS rules above used to change the placeholder color.