: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.

Baseline Status: Achieved Widely Available on Jul 15, 2022 (Cross-browser Newly Available since Jan 15, 2020).

Desktop Browser Engine Support

Google Chrome

47

Supported

Mozilla Firefox

51

Supported

Apple Safari

9

Supported

Microsoft Edge

79

Supported

Mobile Browser Engine Support

Chrome Android

47

Firefox Android

51

Safari iOS

9

Specifications and References

Specification ↗ Can I Use (css-placeholder-shown) ↗ Feature XML ↗

MDN Browser Compat Data Keys:

css.selectors.placeholder-shown ↗ css.selectors.placeholder-shown.non_text_types ↗