Styling Placeholder Text with CSS
4 min readApr 22, 2019
Use the ::placeholder
pseudo-element to style your placeholder text in an <input>
or <textarea>
form element. Most modern browsers support this, but for older browsers, vendor prefixes will be required.
::placeholder {
color: deeppink;
font-size: 5rem;
text-transform: uppercase;
}
HTML
<input placeholder="CSS Placeholder">
Vendor Prefixes
So the syntax I used is supported by most modern browsers:
/* MODERN BROWSER */
::placeholder {
color: deeppink;
}
But for some browsers or older browsers, you will need to use the vendor prefixes.
/* WebKit, Edge */
::-webkit-input-placeholder {
color: deeppink;
}/* Firefox 4-18 */
:-moz-placeholder {
color: deeppink;
opacity: 1;
}/* Firefox 19+ */
::-moz-placeholder {
color: deeppink;
opacity: 1;
}/* IE 10-11 */
:-ms-input-placeholder {
color: deeppink;
}/* Edge */
::-ms-input-placeholder {
color: deeppink;
}/* MODERN BROWSER */
::placeholder {
color: deeppink;
}
Whoa! I know, that’s a huge list. And you might notice quite a few different variations of implementations. So let’s…