Sometimes, we want to change an HTML5 input’s placeholder color with CSS.
In this article, we’ll look at how to change an HTML5 input’s placeholder color with CSS.
How to change an HTML5 input’s placeholder color with CSS?
To change an HTML5 input’s placeholder color with CSS, we can use the *::placeholder CSS selector.
For instance, we write
<input placeholder="hello" /> <br />
<textarea placeholder="hello"></textarea>
to add an input and a text area.
Then we write
*::-webkit-input-placeholder {
color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
color: red;
opacity: 1;
}
*::-moz-placeholder {
/* FF 19+ */
color: red;
opacity: 1;
}
*:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
*::-ms-input-placeholder {
/* Microsoft Edge */
color: red;
}
*::placeholder {
/* modern browser */
color: red;
}
to use the *::placeholder to select the placeholder of the input and text area.
We add browser prefixes to target different browsers.
And we change its color to red.
Conclusion
To change an HTML5 input’s placeholder color with CSS, we can use the *::placeholder CSS selector.
