::placeholder

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

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

Kontrastverhältnis

Platzhaltertext hat typischerweise eine hellere Farbbehandlung, um anzuzeigen, dass es sich um einen Vorschlag für die Art der gültigen Eingaben handelt und nicht um tatsächliche Eingaben.

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Platzhaltertextes und dem Hintergrund der Eingabe hoch genug ist, damit Menschen mit Sehbeeinträchtigungen es lesen können, während auch genügend Unterschied zwischen der Farbe des Platzhaltertextes und der Eingabetextfarbe besteht, damit Nutzer den Platzhalter nicht mit eingegebenen Daten verwechseln.

Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraft der Werte von Platzhaltertext und Eingabehintergrundfarbe bestimmt. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4,5:1 für Textinhalt und 3:1 für größeren Text wie Überschriften erforderlich. Großer Text wird als 18,66px fett oder größer bzw. 24px oder größer definiert.

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

Nutzbarkeit

Platzhaltertext mit ausreichendem Farbkontrast kann als eingegebene Eingabe interpretiert werden. Platzhaltertext verschwindet auch, wenn jemand Inhalte in ein <input>-Element eingibt. Diese Umstände können besonders für Menschen mit kognitiven Beeinträchtigungen das erfolgreiche Ausfüllen von Formularen beeinträchtigen.

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

Mit dieser Implementierung sind die Hinweis-Inhalte auch verfügbar, wenn Informationen in das Eingabefeld eingegeben werden, und die Eingabe erscheint frei von vorbestehenden Eingaben, wenn die Seite geladen wird. Die meisten Bildschirmlesetechnologien verwenden aria-describedby, um den Hinweis nach dem angekündigten Eingabelabeltext zu lesen, und die Person, die den Bildschirmleser verwendet, kann ihn stumm schalten, wenn sie die zusätzlichen Informationen unnötig findet.

<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

Im Windows High Contrast Mode erscheint der Platzhaltertext mit demselben Styling wie vom Benutzer eingegebene Textinhalte. Dadurch wird es für einige Menschen schwierig zu bestimmen, welche Inhalte eingegeben und welche Platzhaltertexte sind.

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

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

Dieses Beispiel zeigt einige Anpassungen, die Sie an den Stilen des Platzhaltertextes 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 Platzhaltertext weniger durchsichtig. Wenn Sie vollständig opaken Text wünschen, dann setzen Sie den Wert der color-Eigenschaft explizit. Der currentColor-Wert kann verwendet werden, um die gleiche 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 stylt ein Element, das einen aktiven Platzhalter hat.
• Verwandte HTML-Elemente: <input>, <textarea>
• HTML-Formulare