::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 Pseudoelement angewendet werden können, kann in einer Regel mit ::placeholder im Selektor verwendet werden.

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 ist.

Es ist wichtig, sicherzustellen, dass das Kontrastverhältnis zwischen der Farbe des Platzhaltertextes und dem Hintergrund der Eingabe hoch genug ist, damit Personen mit Sehbehinderungen ihn lesen können. Dabei muss auch genügend Unterschied zwischen der Farbe des Platzhaltertextes und des Eingabetextes bestehen, sodass Nutzer den Platzhalter nicht mit eingegebenen Daten verwechseln.

Das Kontrastverhältnis wird ermittelt, indem die Leuchtdichte der Farbe des Platzhaltertextes und der Farbe des Eingabehintergrunds verglichen werden. 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ößeren Text 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 WCAG, Leitfaden 1.4 Erklärungen
• Verständnis der Erfolgskriterien 1.4.3 | W3C Understanding WCAG 2.0

Benutzerfreundlichkeit

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 den erfolgreichen Abschluss eines Formulars beeinträchtigen, insbesondere für Personen mit kognitiven Einschränkungen.

Ein alternativer Ansatz zum Bereitstellen von Platzhalterinformationen besteht darin, diese außerhalb der Eingabe in naher 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 verfügbar, auch wenn Informationen in das Eingabefeld eingegeben werden, und die Eingabe erscheint frei von vorheriger Eingabe, wenn die Seite geladen wird. Die meisten Bildschirmlesetechnologien verwenden aria-describedby, um den Hinweis nach dem Text des Eingabelabels vorzulesen, und die Person, die den Screenreader verwendet, kann ihn stummschalten, wenn sie die zusätzlichen Informationen als unnötig empfindet.

<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 Mode

Platzhaltertext wird mit derselben Gestaltung wie vom Benutzer eingegebener Textinhalt angezeigt, wenn er im Windows High Contrast Mode gerendert wird. Dies kann es für einige Personen schwierig machen festzustellen, welche Inhalte eingegeben wurden und welche Inhalte Platzhaltertext sind.

Labels

Platzhalter sind kein Ersatz für das <label> Element. Ohne ein Label, das programmatisch mit einer Eingabe mittels einer Kombination der for und id Attribute verbunden ist, kann assistive Technologie wie Screenreader <input> Elemente nicht interpretieren.

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

Beispiele

Erscheinung des Platzhalters ändern

Dieses Beispiel zeigt einige der Anpassungen, die an den Stilen des Platzhaltertextes vorgenommen werden können.

HTML

<input placeholder="Type here" />

CSS

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

Ergebnis

Opaker Text

Einige Browser machen Platzhaltertext weniger opak. Wenn Sie vollständig opaken Text möchten, 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 Pseudoklasse gestaltet ein Element, das einen aktiven Platzhalter hat.
• Verwandte HTML-Elemente: <input>, <textarea>
• HTML-Formulare