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:

Unstyled placeholder text in input element


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

input::placeholder {
    color: red;

The result:

Red input placeholder text

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 :

Has this been helpful to you?

You can support my work by sharing this article with others, or perhaps buy me a cup of coffee 😊


Share & Discuss on