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;
}

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.

More Information

• Selectors Level 4 Spec
• Can I Use?

Browser Support