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

Suggested Reading:

How do I Redirect to Another Webpage in JavaScript or jQuery? Here’s How to Add Scrollbars to an iframe in HTML How to use Integrity and Crossorigin in a WordPress Theme How to Use The Meta Tag to Redirect an HTML Page How to Allow Multiple File Uploads in HTML Forms How to Convert any Image into a Grayscale Image With CSS How to Disable a Link Using Only CSS and HTML How to Fix SameSite Attribute Warning in Google Chrome How to Create Apache Virtual Host for Your Website How to Use The PHP Ternary Operator With Examples How to Pass Variables via get_template_part in WordPress How to Display the Current Month by Name in JavaScript