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!">