: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

HTML

<input placeholder="Type something here!">

CSS

input:-ms-input-placeholder {
  border-color: silver;
}

input:-moz-placeholder {
  border-color: silver;
}

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:-ms-input-placeholder {
  text-overflow: ellipsis;
}

input:-moz-placeholder {
  text-overflow: ellipsis;
}

input:placeholder-shown {
  text-overflow: ellipsis;
}

Result

Colored text

HTML

<input placeholder="Type something here!">

CSS

input:-ms-input-placeholder {
  color: red;
  font-style: italic;
}

input:-moz-placeholder {
  color: red;
  font-style: italic;
}

input:placeholder-shown {
  color: red;
  font-style: italic;
}

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.studentid:-ms-input-placeholder {
  background-color: yellow;
  color: red;
  font-style: italic;
}

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

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

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

Result

Specifications

Browser compatibility

See also

• The ::placeholder pseudo-element styles the placeholder itself.
• Related HTML elements: <input>, <textarea>
• HTML forms