You are on the editable version of MDN Web Docs

View as an MDN Web Docs user: https://developer.mozilla.org/en-US/docs/Web/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 compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:placeholder-shownChrome Full support 47Edge Full support 79Firefox 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 34Safari Full support 9WebView Android Full support 47Chrome Android Full support 47Firefox 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 34Safari iOS Full support 9Samsung Internet Android Full support 5.0
Support on non-type="text" elements (such as type="number" or type="time")Chrome Full support 47Edge Full support 79Firefox Full support 59IE No support NoOpera Full support 34Safari Full support 9WebView Android Full support 47Chrome Android Full support 47Firefox Android Full support 59Opera Android Full support 34Safari iOS Full support 9Samsung 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

Document Tags and Contributors

Last updated by: mfluehr,