Styling Placeholder Text Using CSS

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.

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#