Table of Contents
Placeholder text will automatically inherit the font family and font size of the regular input text, but you may be in a situation where you want to change the placeholder text color. You can accomplish that with the <^>::placeholder<^> pseudo-element.
In our example, let's define a custom color for our placeholder text, and let's also override the inherited font size to have smaller placeholder text. Here's our base input styling:
input[type="text"] {
font-family: monospace;
font-size: 20px;
color: peru;
}
And here's the styling for our placeholder text:
::-webkit-input-placeholder {
color: peachpuff;
font-size: 13px;
}
::-moz-placeholder {
color: peachpuff;
font-size: 13px;
}
:-ms-input-placeholder {
color: peachpuff;
font-size: 13px;
}
::placeholder {
color: peachpuff;
font-size: 13px;
}
Unfortunately you can see that <^>::placeholder<^> requires a slew of vendor prefixes at the moment.
