:placeholder-shown

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Die :placeholder-shown CSS-Pseudoklasse repräsentiert jedes <input>- oder <textarea>-Element, das derzeit Platzhaltertext anzeigt.

Probieren Sie es aus

Syntax

css
:placeholder-shown {
  /* ... */
}

Beispiele

Einfaches Beispiel

Dieses Beispiel wendet besondere Schrift- und Rahmenstile an, wenn der Platzhalter angezeigt wird.

HTML

html
<input placeholder="Type something here!" />

CSS

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

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

Ergebnis

Überlaufender Text

Wenn Formularfelder zu klein sind, kann Platzhaltertext auf eine unerwünschte Weise abgeschnitten werden. Sie können die Eigenschaft text-overflow verwenden, um zu ändern, wie überlaufender Text angezeigt wird.

HTML

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

CSS

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

Ergebnis

Angepasstes Eingabefeld

Das folgende Beispiel hebt das Feld für die Studentenausweisnummer mit einem individuellen Stil hervor.

HTML

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="student-id"
      placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>

CSS

css
input {
  background-color: #e8e8e8;
  color: black;
}

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

Ergebnis

Spezifikationen

Specification
HTML
# selector-placeholder-shown
Selectors Level 4
# placeholder-shown-pseudo

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:placeholder-shown
Support on non-type="text" elements (such as type="number" or type="time")

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

Siehe auch