::placeholder CSS pseudo-element

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 der CSS-Eigenschaften, die auf das ::first-line Pseudoelement anwendbar sind, kann in einer Regel mit ::placeholder im Selektor verwendet werden.

Syntax

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

Barrierefreiheit

Farbkontrast

Kontrastverhältnis

Platzhaltertext hat typischerweise eine hellere Farbgestaltung, um darauf hinzuweisen, dass es sich um einen Vorschlag handelt, welcher Art von Eingabe gültig sein wird, 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 Personen mit Sehbehinderungen es lesen können, während gleichzeitig sichergestellt wird, dass es einen ausreichenden Unterschied zwischen der Farbe des Platzhaltertextes und der eingegebenen Texte gibt, damit Benutzer den Platzhalter nicht mit eingegebenen Daten verwechseln.

Das Kontrastverhältnis wird bestimmt, indem die Leuchtkraft des Platzhaltertextes und die Hintergrundfarbwerte der Eingabe verglichen werden. 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 wird als 18.66px und fett oder größer oder 24px oder größer definiert.

• 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 ausreichendem Farbkontrast kann als eingegebene Eingabe interpretiert werden. Platzhaltertext wird ebenfalls verschwinden, wenn eine Person Inhalte in ein <input> Element eingibt. Beide Umstände können das erfolgreiche Ausfüllen von Formularen beeinträchtigen, insbesondere für Menschen mit kognitiven Schwierigkeiten.

Ein alternativer Ansatz zur Bereitstellung von Platzhalterinformationen besteht darin, sie außerhalb der Eingabe in engem visuellen Bezug einzubeziehen und dann aria-describedby zu verwenden, um das <input> programmgesteuert mit seinem Hinweis zu assoziieren.

Mit dieser Implementierung sind die Hinweisinhalte verfügbar, selbst wenn Informationen in das Eingabefeld eingegeben werden, und die Eingabe erscheint frei von vorhandenen Eingaben, wenn die Seite geladen wird. Die meisten Bildschirmlesetechnologien verwenden aria-describedby, um den Hinweis nach dem Ankündigen des Texteingabelabels vorzulesen, und die Person, die den Bildschirmleser 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-Hochkontrastmodus

Platzhaltertext wird im Windows-Hochkontrastmodus mit der gleichen Gestaltung wie vom Benutzer eingegebene Textinhalte dargestellt. Dies wird es für einige Menschen schwierig machen zu bestimmen, welche Inhalte eingegeben wurden und welche Inhalte Platzhaltertext sind.

Labels

Platzhalter sind kein Ersatz für das <label> Element. Ohne ein Label, das programmgesteuert mit einer Eingabe über eine Kombination der Attribute for und id verbunden ist, kann assistive Technologie wie Bildschirmleser <input> Elemente nicht analysieren.

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

Beispiele

Erscheinungsbild des Platzhalters ändern

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

Opaquer Text

Einige Browser machen Platzhaltertext weniger deckend. Wenn Sie vollständig deckenden Text wünschen, setzen Sie dann 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 stylt ein Element, das einen aktiven Platzhalter hat.
• Verwandte HTML-Elemente: <input>, <textarea>
• HTML-Formulare