Tutorial

Styling Placeholder Text Using CSS

CSS

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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.

Creative Commons License