Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

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

Colored text

HTML

<input placeholder="Type something here!">

CSS

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 {
  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 AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support 47Edge No support No
Notes
No support No
Notes
Notes This feature is not implemented. See this enhancement request.
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 34Safari Full support 9WebView Android Full support 51Chrome Android ? Edge Mobile No support No
Notes
No support No
Notes
Notes This feature is not implemented. See this enhancement request.
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 ? Safari iOS Full support 9.2Samsung Internet Android ?
Support on non-type="text" elements (such as type="number" or type="time")
Experimental
Chrome ? Edge No support NoFirefox Full support YesIE No support NoOpera ? Safari Full support YesWebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support YesOpera Android ? Safari iOS Full support YesSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

See also

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: mfuji09,