CSS - :placeholder-shown

The :placeholder-shown pseudo-class represents any form element displaying placeholder text.

Example

 

HTML

HTML
<input placeholder="Type something here">

CSS

CSS
input {
  border: 2px solid black;
  padding: 3px;
}

:placeholder-shown {
  border-color: silver;
}

Result

Syntax  

CSS
:placeholder-shown { <var>style properties</var> }

Description  

The :placeholder-shown pseudo-class represents any form element displaying placeholder text.

Browser Compatibility  

Feature Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Basic support 47.0 51.0 (51.0)[1] No support No support[2] 34.0 9.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 51.0 51.0 (51.0)[1] No support No support 9.2

[1] Before Gecko 51.0 (Firefox 51.0 / Thunderbird 51.0 / SeaMonkey 2.48) Gecko implemented a -moz prefixed pseudo-class called :-moz-placeholder, which was later replaced by a ::-moz-placeholder pseudo-element. The standard pseudo-class got implemented in bug 1069012.

[2] Support for this pseudo-class is requested at the Microsoft Edge Developer Feedback page.

See Also  

Specifications  

Specification Status Comment
Selectors Level 4
The definition of ':placeholder' in that specification.		 Working Draft Initial definition

License

© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/:placeholder-shown

CSS CSS Pseudo-class Reference