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
- the specs only have
:placeholder-shown
and not::placeholder
: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
Browser Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Opera | Firefox | IE | Edge | Safari |
---|---|---|---|---|---|
47 | 34 | 51 | No | No | 9 |
Mobile / Tablet
iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
---|---|---|---|---|---|
9.0-9.2 | No | No | 62 | 64 | 57 |
- Tech Tricks answered 2 years ago
- You must login to post comments
Please login first to submit.