Web/CSS/ placeholder-shown

From Get docs


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

This example applies special font and border styles when the placeholder is shown.

HTML

<input placeholder="Type something here!">

CSS

input {
  border: 1px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: teal;
  color: purple;
  font-style: italic;
}

Result

Overflowing text

When form fields are too small, placeholder text can get cropped in an undesirable way. You can use the text-overflow property to alter the way overflowing text is displayed.

HTML

<input id="input1" placeholder="Name, Rank, and Serial Number">
<br><br>
<input id="input2" placeholder="Name, Rank, and Serial Number">

CSS

#input2:placeholder-shown {
  text-overflow: ellipsis;
}

Result

Customized input field

The following example highlights the Branch and ID code fields with a custom style.

HTML

<form id="test"> 
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name"/>
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch"/>
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
  </p>
  <input type="submit"/>
</form>

CSS

input {
  background-color: #E8E8E8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}

Result

Specifications

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

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
:placeholder-shown Chrome

Full support 47

Edge

Full support 79

Firefox Full support 51


Full support 51


No support 4 — 51

Alternate Name'

Alternate Name' Uses the non-standard name: :-moz-placeholder

IE Full support 10

Alternate Name'

Full support 10

Alternate Name'

Alternate Name' Uses the non-standard name: :-ms-input-placeholder

Opera

Full support 34

Safari

Full support 9

WebView Android

Full support 47

Chrome Android

Full support 47

Firefox Android Full support 51


Full support 51


No support 4 — 51

Alternate Name'

Alternate Name' Uses the non-standard name: :-moz-placeholder

Opera Android

Full support 34

Safari iOS

Full support 9

Samsung Internet Android

Full support 5.0

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

Full support 47

Edge

Full support 79

Firefox

Full support 59

IE

No support No

Opera

Full support 34

Safari

Full support 9

WebView Android

Full support 47

Chrome Android

Full support 47

Firefox Android

Full support 59

Opera Android

Full support 34

Safari iOS

Full support 9

Samsung Internet Android

Full support 5.0

Legend

Full support  
Full support
No support  
No support
Uses a non-standard name.'
Uses a non-standard name.


See also