W3cubDocs

/CSS

:placeholder-shown

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 4
The definition of ':placeholder-shown' in that specification.
Working Draft Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
:placeholder-shown 47 79 51
51
4 — 51
Uses the non-standard name: :-moz-placeholder
10
10
Uses the non-standard name: :-ms-input-placeholder
34 9
Support on non-type="text" elements (such as type="number" or type="time") 47 79 59 No 34 9
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
:placeholder-shown 47 47 51
51
4 — 51
Uses the non-standard name: :-moz-placeholder
34 9 5.0
Support on non-type="text" elements (such as type="number" or type="time") 47 47 59 34 9 5.0

See also

© 2005–2020 Mozilla 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