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.

Share it!

Further Reading:

When to Use Margin vs Padding in CSS CSS Box-Sizing to Stop Padding and Borders From Resizing Elements How to Add Google Fonts to Your Website How to Change font height and width in CSS and HTML How to Properly Set Cellspacing and Cellpadding for HTML Tables in CSS Firefox 52, Enter WebAssembly and CSS Grid, Exit Windows XP