How to Style Input Placeholder Text with CSS

To style the HTML input element’s placeholder text with CSS, you need to target the pseudo-element attribute. You do that with the CSS pseudo selector ::.

A regular input element with placeholder text

<input type="text" placeholder="Hello there!">

How the placeholder text looks with the default browser styling:

CSS

Now let’s use the CSS ::placeholder selector to make the input element’s placeholder text red:

input::placeholder {
    color: red;
}

The result:

Reusable placeholder text class

If you don’t want to style all your <input> element placeholder text the same way, as the code above does (by targetting the input element directly), you can use a class:

.custom-input-placeholder::placeholder {
    color: red;
}

And add that to any input element that you want:

<input class="custom-input-placeholder" type="text" placeholder="Hello there!">

Good to know

Don’t confuse pseudo-elements with pseudo-classes.

• pseudo-elements represent a part of the DOM.
• pseudo-classes represent the state of an element based on the users’ interaction with it. For example: :focus, or :active.

Syntax difference:

• pseudo-elements are defined with a double colon: ::
• pseudo-classes are defined with a single colon :