: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 ⁨Januar 2020⁩.

Die :placeholder-shown CSS Pseudoklasse repräsentiert jedes <input> oder <textarea> Element, das momentan 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;
}

<form>
  <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+" />
</form>

Syntax

css

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

Beispiele

Einfaches Beispiel

Dieses Beispiel wendet spezielle 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

Wenn Formularfelder zu klein sind, kann der Platzhaltertext auf unerwünschte Weise abgeschnitten werden. Sie können die text-overflow Eigenschaft verwenden, um die Darstellung von überlaufendem Text zu ändern.

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

Benutzerdefiniertes Eingabefeld

Das folgende Beispiel hebt das Studentenausweisfeld mit einem benutzerdefinierten 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

Siehe auch

Das ::placeholder Pseudo-Element stilisiert den Platzhalter selbst.
Verwandte HTML-Elemente: <input>, <textarea>
HTML-Formulare

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden