This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
The :placeholder-shown pseudo-class represents any form element displaying placeholder text.
/* Selects any <input> or <textarea> element with */
/* a placeholder attribute that is currently displaying */
/* the placeholder */
:placeholder-shown {
border: 2px solid silver;
}
Syntax
:placeholder-shown
Example
HTML
<input placeholder="Type something here">
CSS
input {
border: 2px solid black;
padding: 3px;
}
:placeholder-shown {
border-color: silver;
}
Result
Specifications
| Specification | Status | Comment |
|---|---|---|
| Selectors Level 4 The definition of ':placeholder' in that specification. |
Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support (on <input type="text">) |
47.0 | 51.0 (51.0)[1] | No support | No support[2] | 34.0 | 9.0 |
on type="number", type="time", and similar |
? | No support | No support | No support | ? | ? |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support (on <input type="text">) |
51.0 | 51.0 (51.0)[1] | No support | No support | 9.2 |
on type="number", type="time", and similar |
? | No support | No support | No support | ? |
[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.