::placeholder CSS pseudo-element

Probieren Sie es aus

input {
  margin-top: 0.5rem;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

<label for="first-name">Your phone number:</label><br />

<input
  id="first-name"
  type="tel"
  name="phone"
  minlength="9"
  maxlength="9"
  placeholder="It must be 9 digits" />

In einer Regel, deren Selektor ::placeholder verwendet, können nur die CSS-Eigenschaften verwendet werden, die für das Pseudoelement ::first-line gelten.

Syntax

::placeholder {
  /* ... */
}

Barrierefreiheit

Farbkontrast

Kontrastverhältnis

Platzhaltertext wird üblicherweise in einer helleren Farbe dargestellt, um zu verdeutlichen, dass er lediglich einen Hinweis auf eine gültige Eingabe gibt und selbst keine Eingabe ist.

Das Kontrastverhältnis zwischen dem Platzhaltertext und dem Hintergrund des Eingabefelds muss hoch genug sein, damit Menschen mit eingeschränktem Sehvermögen den Text lesen können. Gleichzeitig muss sich die Farbe des Platzhaltertexts ausreichend von der Farbe eingegebenen Texts unterscheiden, damit Nutzende den Platzhalter nicht mit eingegebenen Daten verwechseln.

Das Farbkontrastverhältnis wird durch einen Vergleich der Helligkeitswerte des Platzhaltertexts und des Eingabefeldhintergrunds bestimmt. Um die aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist für Text ein Verhältnis von 4,5:1 und für größeren Text, beispielsweise Überschriften, ein Verhältnis von 3:1 erforderlich. Als größerer Text gilt Text ab 18,66 px in Fettschrift oder ab 24 px in normaler Schrift.

• WebAIM: Farbkontrast-Prüftool
• MDN: WCAG verstehen – Erläuterungen zu Richtlinie 1.4
• Erfolgskriterium 1.4.3 verstehen | W3C: WCAG 2.0 verstehen

Benutzerfreundlichkeit

Platzhaltertext mit ausreichendem Farbkontrast kann mit einer bereits erfolgten Eingabe verwechselt werden. Außerdem verschwindet der Platzhaltertext, sobald jemand Inhalt in ein <input>-Element eingibt. Beides kann das erfolgreiche Ausfüllen eines Formulars erschweren, insbesondere für Menschen mit kognitiven Einschränkungen.

Eine Alternative besteht darin, den Hinweis außerhalb des Eingabefelds in unmittelbarer visueller Nähe zu platzieren und das <input> mithilfe von aria-describedby programmatisch mit dem Hinweis zu verknüpfen.

Bei dieser Umsetzung bleibt der Hinweis auch dann verfügbar, wenn bereits etwas in das Eingabefeld eingegeben wurde. Zugleich wirkt das Eingabefeld beim Laden der Seite nicht so, als enthielte es bereits eine Eingabe. Die meisten Screenreader lesen mithilfe von aria-describedby den Hinweis vor, nachdem sie die Beschriftung des Eingabefelds angesagt haben. Nutzende des Screenreaders können den Hinweis stummschalten, wenn sie die zusätzliche Information nicht benötigen.

<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

• Platzhalter in Formularfeldern sind schädlich — Nielsen Norman Group

Windows-Modus für hohen Kontrast

Im Windows-Modus für hohen Kontrast wird Platzhaltertext genauso dargestellt wie von Nutzenden eingegebener Text. Dadurch kann es für manche Menschen schwierig sein, eingegebenen Text von Platzhaltertext zu unterscheiden.

Beschriftungen

Platzhalter ersetzen kein <label>-Element. Ohne eine Beschriftung, die über die Attribute for und id programmatisch mit einem Eingabefeld verknüpft ist, können assistive Technologien wie Screenreader <input>-Elemente nicht richtig erfassen.

• Platzhalter in Formularfeldern sind schädlich — Nielsen Norman Group

Beispiele

Darstellung des Platzhaltertexts ändern

Dieses Beispiel zeigt einige Anpassungen, die Sie am Stil des Platzhaltertexts vornehmen können.

HTML

<input placeholder="Type here" />

CSS

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
  opacity: 0.5;
}

Ergebnis

Deckender Text

Einige Browser stellen Platzhaltertext mit verringerter Deckkraft dar. Wenn der Text vollständig deckend sein soll, legen Sie den Wert der Eigenschaft color ausdrücklich fest. Mit dem Wert currentColor erhält der Platzhaltertext dieselbe Farbe wie das zugehörige Eingabeelement.

HTML

<input placeholder="Color set by browser" />
<input placeholder="Same color as input" class="explicit-color" />
<input placeholder="Semi-opaque text color" class="opacity-change" />

CSS

input {
  font-weight: bold;
  color: green;
}

.explicit-color::placeholder {
  /* use the same color as input element to avoid the browser set default color */
  color: currentColor;
}

.opacity-change::placeholder {
  /* less opaque text */
  color: color-mix(in srgb, currentColor 70%, transparent);
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die Pseudoklasse :placeholder-shown gestaltet ein Element, das einen aktiven Platzhalter hat.
• Verwandte HTML-Elemente: <input>, <textarea>
• HTML-Formulare