::placeholder

Nur die Teilmenge von CSS-Eigenschaften, die auf das ::first-line Pseudoelement angewendet werden können, kann in einer Regel verwendet werden, die ::placeholder in ihrem Selektor verwendet.

Kontrastverhältnis

Platzhaltertext hat typischerweise eine hellere Farbgestaltung, um anzuzeigen, dass es sich um einen Vorschlag handelt, welche Art von Eingabe gültig ist, und es sich nicht um eine tatsächliche Eingabe handelt.

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Platzhaltertextes und dem Hintergrund der Eingabe hoch genug ist, damit Menschen mit Sehbehinderungen es lesen können, während auch gewährleistet wird, dass es einen ausreichenden Unterschied zwischen dem Platzhaltertext und der Eingabetextfarbe gibt, damit Benutzer den Platzhalter nicht für eingegebene Daten halten.

Das Kontrastverhältnis der Farben wird bestimmt, indem die Leuchtkraft der Platzhaltertext- und Eingabehintergrundfarben verglichen wird. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größere Texte wie Überschriften erforderlich. Großer Text ist definiert als 18,66px und fett oder größer, oder 24px oder größer.

• WebAIM: Color Contrast Checker
• MDN: Verständnis der WCAG, Leitfaden 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis der WCAG 2.0

Benutzerfreundlichkeit

Platzhaltertext mit ausreichend Farbkontrast kann als eingegebene Eingabe interpretiert werden. Platzhaltertext verschwindet außerdem, wenn eine Person Inhalte in ein <input> Element eingibt. Beide Umstände können die erfolgreiche Vollendung von Formularen beeinträchtigen, besonders für Menschen mit kognitiven Beeinträchtigungen.

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

Mit dieser Implementierung ist der Hinweistext verfügbar, selbst wenn Informationen in das Eingabefeld eingegeben werden, und die Eingabe erscheint frei von bestehenden Eingaben, wenn die Seite geladen wird. Die meisten Bildschirmlesetechnologien verwenden aria-describedby, um den Hinweis nach dem Eingabelabel vorzulesen, und die Person, die den Bildschirmleser nutzt, kann diesen stummschalten, wenn sie die zusätzlichen Informationen als unnötig erachtet.

<label for="user-email">Your email address</label>
<span id="user-email-hint" class="input-hint">Example: [email protected]</span>
<input
  id="user-email"
  aria-describedby="user-email-hint"
  name="email"
  type="email" />

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

Platzhaltertext wird mit derselben Gestaltung wie vom Benutzer eingegebener Text dargestellt, wenn er im Windows Hochkontrastmodus angezeigt wird. Dies wird es für manche Menschen schwierig machen, zu bestimmen, welche Inhalte eingegeben wurden und welche Inhalte Platzhaltertext sind.

Platzhalter sind kein Ersatz für das <label> Element. Ohne ein Label, das mit einer Eingabe durch die Kombination der for und id Attribute programmatisch verknüpft wurde, kann unterstützende Technologie wie Bildschirmleser <input> Elemente nicht interpretieren.

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

Dieses Beispiel zeigt einige Anpassungen, die Sie an den Stilen 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

Einige Browser machen den Platzhaltertext weniger opak. Wenn Sie vollständig opaken Text wünschen, setzen Sie den Wert der color Eigenschaft explizit. Der currentColor Wert kann verwendet werden, um dieselbe Farbe wie das entsprechende 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

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