:placeholder-shown

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 CSS 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

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

Document Tags and Contributors

Tags: 
 Contributors to this page: mfluehr, chrisdavidmills, ferrybig, teoli, Sebastianz
 Last updated by: mfluehr,