How to Change an HTML5 Input’s Placeholder Color With 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:

::placeholder { /* Most modern browsers support this */
   color:    #a9a9a9;
}

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:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:    #a9a9a9;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color:    #a9a9a9;
opacity:  1;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
color:    #a9a9a9;
opacity:  1;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:    #a9a9a9;
}

::-ms-input-placeholder { /* Microsoft Edge */
color:    #a9a9a9;
}

::placeholder { /* Most modern browsers support this. */
color:    #a9a9a9;
}

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.

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

<input type="text" placeholder="The cool placeholder!">

Ref: https://caniuse.com/?search=%3A%3Aplaceholder

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.