::placeholder

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.

Der ::placeholder CSS Pseudo-Element repräsentiert den Platzhaltertext in einem <input>- oder <textarea>-Element.

Probieren Sie es aus

Nur die Untermenge von CSS-Eigenschaften, die auf das ::first-line-Pseudo-Element anwendbar sind, kann in einer Regel verwendet werden, die ::placeholder in ihrem Selektor verwendet.

Hinweis: In den meisten Browsern erscheint der Platzhaltertext standardmäßig als durchscheinende oder hellgraue Farbe.

Syntax

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

Barrierefreiheit

Farbkontrast

Kontrastverhältnis

Platzhaltertext hat typischerweise eine hellere Farbgebung, um anzuzeigen, dass er einen Vorschlag für gültige Eingaben darstellt und keine tatsächliche Eingabe. Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Platzhaltertextes und dem Hintergrund des Eingabefeldes hoch genug ist, damit Personen mit Sehbehinderungen diesen lesen können, und gleichzeitig sicherzustellen, dass ein ausreichender Unterschied zwischen dem Platzhaltertext und der Farbe des eingegebenen Textes besteht, damit Benutzer den Platzhalter nicht mit eingegebenen Daten verwechseln.

Das Kontrastverhältnis wird durch den Vergleich der Helligkeit des Platzhaltertextes und der hinterlegten Eingabefarbe bestimmt. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, wird ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größeren Text wie Überschriften benötigt. Großer Text wird definiert als 18,66 px und fett oder größer, oder 24 px oder größer.

Benutzerfreundlichkeit

Platzhaltertext mit ausreichendem Farbkontrast kann als eingegebene Eingabe interpretiert werden. Platzhaltertext verschwindet auch, wenn jemand Inhalte in ein <input>-Element eingibt. Beide Umstände können den erfolgreichen Abschluss eines Formulars beeinträchtigen, insbesondere für Personen mit kognitiven Einschränkungen.

Ein alternativer Ansatz zur Bereitstellung von Platzhalterinformationen besteht darin, diese außerhalb des Eingabefeldes in unmittelbarer visueller Nähe bereitzustellen und dann aria-describedby zu verwenden, um das <input> programmgesteuert mit seinem Hinweis zu verknüpfen.

Bei dieser Implementierung sind die Hinweisinhalte auch verfügbar, wenn Informationen in das Eingabefeld eingetragen werden, und die Eingabe erscheint frei von bereits vorhandenen Inhalten, wenn die Seite geladen wird. Die meisten Screenreader-Technologien verwenden aria-describedby, um den Hinweis nach dem Vorlesen des Eingabeetiketts vorzulesen, und die Person, die den Screenreader verwendet, kann es deaktivieren, wenn sie die zusätzlichen Informationen nicht benötigt.

html
<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" />

Windows High Contrast Mode

Platzhaltertext wird im Windows High Contrast Mode mit demselben Stil wie vom Benutzer eingegebener Text angezeigt. Dies kann es einigen Menschen erschweren zu erkennen, welche Inhalte eingegeben wurden und welche Platzhaltertext sind.

Labels

Platzhalter sind kein Ersatz für das <label>-Element. Ohne ein Label, das programmgesteuert mit einer Eingabe durch die Kombination der Attribute for und id verknüpft wurde, kann assistive Technologie wie ein Screenreader keine <input>-Elemente parsen.

Beispiele

Platzhalterdarstellung ändern

Dieses Beispiel zeigt einige der Anpassungen, die Sie am Stil von Platzhaltertext vornehmen können.

HTML

html
<input placeholder="Type here" />

CSS

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

Ergebnis

Opaquer Text

Einige Browser machen Platzhaltertext weniger deckend. Wenn Sie vollständig deckenden Text möchten, setzen Sie den Wert der Eigenschaft color explizit. Der Wert currentColor kann verwendet werden, um dieselbe Farbe wie das zugehörige Eingabeelement zu haben.

HTML

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

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

Hinweis: Beachten Sie, dass Browser unterschiedliche Standardfarben für Platzhaltertext verwenden. Beispielsweise verwendet Firefox die Farbe des Eingabeelements mit 54% Deckkraft, und Chrome verwendet die Farbe darkgray. Wenn Sie eine einheitliche Platzhaltertextfarbe in allen Browsern möchten, setzen Sie die color-Eigenschaft explizit.

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4
# placeholder-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

Legend

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

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch