Placeholder-Shown :placeholder-shown

The :placeholder-shown pseudo-class matches an input element that has placeholder text.

Browser Support

Chrome Firefox Safari Opera IE Edge
Desktop yes yes yes yes -ms -ms
Mobile yes yes yes no -ms -ms

Syntax

E:placeholder-shown { /* Style properties */ }

/* The following are the browser supported versions of the :placeholder-shown pseudo-class. */

E::-webkit-input-placeholder { /* Chrome, Safari, Opera */ }
E::-moz-placeholder { /* Firefox */ }
E:-ms-input-placeholder { /* IE */ }

Example

/* In this example, the placeholder text of every element with a placeholder will be blue. */

input:placeholder-shown {
color: blue;
}

Information is based on Selectors Level 4 - W3C Working Draft (last updated on May 2, 2013)
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.