:placeholder-shown

Last updated on:

The :placeholder-shown pseudo-class selects the input element itself when placeholder text exists in a form input. Think of it as a nice way to distinguish between inputs that are currently showing placeholder text versus those that are not.

input:placeholder-shown {
  border: 5px solid red;
}

See the Pen :placeholder-shown scoped to class by CSS-Tricks (@css-tricks) on CodePen.

The idea behind placeholders

Text-based <input>s and the <textarea> input can have placeholder text. It's text that is shown when the input is empty, to suggest a possible value. For example, a form asking for a school might have a label for what it's asking for, but then suggest "Forest Hills Example High School" in the placeholder as an example value:

<code><label for="school">School Name:</label>
<input placeholder="Forest Hills Example High School" type="text" name="school" id="school">

The difference between :placeholder-shown and ::placeholder

:placeholder-shown is for selecting the input itself when it's placeholder text is being shown. As opposed to ::placeholder which styles the placeholder text.

Here's a diagram:

I found this highly confusing as

  1. the specs only have :placeholder-shown and not ::placeholder
  2. :placeholder-shown can still affect the styling of the placeholder text, since it's a parent element (e.g. font-size).

Note that :placeholder-shown is a pseudo class (it's an element in a particular state) and ::placeholder is a pseudo element (a visible thing that isn't really in the DOM). Distinguishable by single-versus-double colons.

Tab Atkins cleared it up for me via email:

:placeholder-shown, being a pseudo-class, has to select an existing element - it selects the input whenever you're in the placeholder-showing state. The ::placeholder pseudo-element wraps the actual placeholder text.

If you need to style the placeholder text

Use ::placeholder (actually, use all the crazy vendor prefixes for it) which we have detailed in the Almanac here.

More Information

Browser Support

Chrome Safari Firefox Opera IE Edge Android iOS
Yes Yes No Yes No No No No
This comment thread is closed. If you have important information to share, you can always contact me.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed