:placeholder-shown
The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.
Overview
The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 47 | 79 | 51 | 9 | 47 | 9 | |
non text types Support on non-`type="text"` elements (such as `type="number"` or `type="time"`) | 47 | 79 | 59 | 9 | 47 | 9 |
- This feature was removed in a later browser version (51)
- Previously available under a different name: :-moz-placeholder (4)
Syntax
input:placeholder-shown + label {
transform: translateY(0);
opacity: 0.5;
}
input:not(:placeholder-shown) + label {
transform: translateY(-20px);
font-size: 0.75rem;
}Live demo
Use cases
Using :placeholder-shown
The :placeholder-shown CSS pseudo-element selects <input> and <textarea> elements when no value is set and the element's placeholder attribute is not empty. Not to be confused with ::placeholder, which selects the placeholder text itself.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features