This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The :placeholder-shown
CSS pseudo-class represents any <input>
or <textarea>
element that is currently displaying placeholder text.
/* Selects any element with an active placeholder */ :placeholder-shown { border: 2px solid silver; }
Syntax
:placeholder-shown
Examples
Basic example
HTML
<input placeholder="Type something here!">
CSS
input { border: 2px solid black; padding: 3px; } input:placeholder-shown { border-color: silver; }
Result
Overflowing text
On narrow screens such as smartphones, the width of search boxes and other form fields can get drastically shortened. This can result in their placeholder text getting cropped in an undesirable way. It is often useful to alter this behavior with the text-overflow
property.
HTML
<input placeholder="Enter something into this field, if you please!">
CSS
input:placeholder-shown { text-overflow: ellipsis; }
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 has been requested at the Microsoft Edge Developer Feedback page.
See also
- The
::placeholder
pseudo-element styles the placeholder itself. - Related HTML elements:
<input>
,<textarea>
:-moz-placeholder
,::-moz-placeholder
- HTML forms