::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
::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.
- WebAIM: Color Contrast Checker
- MDN Verständnis von WCAG, Richtlinie 1.4 Erklärungen
- Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis von WCAG 2.0
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.
<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
Beispiele
Platzhalterdarstellung ändern
Dieses Beispiel zeigt einige der Anpassungen, die Sie am Stil von Platzhaltertext vornehmen können.
HTML
<input placeholder="Type here" />
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
<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
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::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
- Das
:placeholder-shown
Pseudo-Class formatiert ein Element, das einen aktiven Platzhalter hat. - Verwandte HTML-Elemente:
<input>
,<textarea>
- HTML-Formulare