CSS Click Chart

Placeholder/Placeholder Shown

A pseudo-element and pseudo-class to allow you to style a text input's placeholder text, or to style a text input based on whether or not the placeholder text is visible.


:placeholder-shown and ::placeholder on W3C.

Example Code

Live Demonstration

Type some text into the input below. A message will display to show the removed placeholder text. This is just one application of the :placeholder-shown pseudo-class.


Browser Support

Can I Use css-placeholder-shown? Data on support for the placeholder-shown feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles