CSS ::placeholder pseudo element

You can style input elements in different ways. You can style the border of the input, the text the user enters in the input, and you can also style the placeholder.

In this article, we'll be exploring how to style the placeholder part of an input.

This pseudo element allows you to apply specific styles to the placeholder of an input.

Test this pseudo element by selecting the code blocks below:

input::placeholder {
  color: initial;
}

input::placeholder {
  color: red;
  font-size: 20px;
  text-transform: uppercase;
}

The styles you can apply to this element is limited however. You can apply font-related properties, background-related properties, the color property and a few others. You cannot, for example, appy the margin or padding for the placeholder.