CSS-Pseudoklasse `:placeholder-shown`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Januar 2020 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Pseudoklasse :placeholder-shown bezeichnet jedes <input>- oder <textarea>-Element, das gerade einen Platzhaltertext anzeigt.

Probieren Sie es aus

label {
  display: block;
  margin-top: 1em;
}

input:placeholder-shown {
  background-color: ivory;
  border: 2px solid darkorange;
  border-radius: 5px;
}

<label for="name">Full Name:</label>
<input id="name" name="name" type="text" />

<label for="email">Email Address:</label>
<input id="email" name="email" type="email" placeholder="name@example.com" />

<label for="age">Your age:</label>
<input
  id="age"
  name="age"
  type="number"
  value="18"
  placeholder="You must be 18+" />

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 unerwünschte Weise abgeschnitten werden. Mit der Eigenschaft text-overflow können Sie ändern, wie überlaufender Text dargestellt 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 Studierenden-ID durch einen angepassten Stil hervor.

HTML

html

<p>
  <label for="name">Student Name:</label>
  <input id="name" placeholder="Student Name" />
</p>
<p>
  <label for="branch">Student Branch:</label>
  <input id="branch" placeholder="Student Branch" />
</p>
<p>
  <label for="sid">8-Digit Student ID:</label>
  <input
    pattern="[0-9]{8}"
    id="sid"
    class="student-id"
    placeholder="8 digit id" />
</p>

CSS

css

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

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