W3cubDocs

/CSS

:placeholder-shown

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-shown' in that specification.		 Working Draft Initial definition.

Browser compatibility

Feature Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 47 No1

51

4 — 512

 No 34 9
Support on non-type="text" elements (such as type="number" or type="time") ? No No No ? ?
Feature Android webview Chrome for Android Edge mobile Firefox for Android Opera Android iOS Safari Samsung Internet
Basic support 51 ? No1

51

4 — 512

 No 9.2 ?
Support on non-type="text" elements (such as type="number" or type="time") ? ? ? No No ? ?

1. This feature is not implemented. See this enhancement request.

2. Supported as :-moz-placeholder.

See also

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-shown