::placeholder

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

Nur die Teilmenge von CSS-Eigenschaften, die auf das ::first-line Pseudo-Element anwendbar sind, kann in einer Regel mit ::placeholder im Selektor genutzt werden.

Syntax

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

Barrierefreiheit

Farbkontrast

Kontrastverhältnis

Platzhaltertext hat typischerweise eine hellere Farbgebung, um anzudeuten, dass er ein Vorschlag für eine gültige Eingabe und keine tatsächliche Eingabe ist.

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 ihn lesen können, während gleichzeitig genug Unterschied zwischen Platzhaltertext und Eingabetext besteht, damit die Benutzer den Platzhalter nicht für eingegebene Daten halten.

Das Farbkontrastverhältnis wird bestimmt, indem die Helligkeit des Platzhaltertextes mit den Farbeigenschaften des Eingabehintergrundes verglichen wird. Um die aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, ist ein Verhältnis von 4.5:1 für Textinhalte und 3:1 für größeren Text wie Überschriften erforderlich. Großer Text ist definiert als 18,66px fett oder größer oder 24px oder größer.

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

Benutzbarkeit

Platzhaltertext mit ausreichendem Farbkontrast kann als eingegebene Eingabe interpretiert werden. Platzhaltertext verschwindet auch, wenn eine Person Inhalte in ein <input>-Element eingibt. Beide Umstände können das erfolgreiche Ausfüllen eines Formulars beeinträchtigen, insbesondere für Menschen mit kognitiven Einschränkungen.

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

Mit dieser Umsetzung ist der Hinweisinhalt verfügbar, auch wenn Informationen in das Eingabefeld eingegeben werden, und das Eingabefeld erscheint frei von vorhandenen Eingaben, wenn die Seite geladen wird. Die meisten Screenreader-Technologien verwenden aria-describedby, um den Hinweis nach dem Ansagen des Labels des Eingabefeldes vorzulesen, und die Person, die den Screenreader verwendet, kann ihn 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: 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 High Contrast-Modus

Im Windows High Contrast-Modus wird der Platzhaltertext mit der gleichen Formatierung wie vom Benutzer eingegebene Textinhalte angezeigt. Dies erschwert es einigen Menschen, zwischen eingegebenen Inhalten und Platzhaltertext zu unterscheiden.

Labels

Platzhalter sind kein Ersatz für das <label>-Element. Ohne ein Label, das mithilfe einer Kombination der Attribute for und id programmatisch mit einer Eingabe verknüpft ist, können unterstützende Technologien wie Screenreader <input>-Elemente nicht analysieren.

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

Beispiele

Aussehen des Platzhalters ändern

Dieses Beispiel zeigt einige der 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

Opaquer Text

Einige Browser machen Platzhaltertext weniger deckend. Wenn Sie vollständig deckenden Text wünschen, 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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