:placeholder-shown

Placeholder

The :placeholder-shown pseudo-class matches an input element that is showing such placeholder text.

Browser Support (tested using latest versions)

Desktop
Google Chrome
-webkit
Mozilla Firefox
-moz
Safari
-webkit
Opera Browser
-webkit
Internet Explorer
-ms
Mobile
Android Browser
-webkit
Chrome for Android
-webkit
Mozilla Firefox Mobile
-moz
Safari iOS
-webkit
Opera Mobile
-webkit
IE Mobile
-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.