::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 Teilbereich von CSS-Eigenschaften, die auf das ::first-line Pseudo-Element anwendbar sind, kann in einer Regel verwendet werden, die ::placeholder in ihrem Selektor hat.

Kontrastverhältnis

Platzhaltertext hat typischerweise eine hellere Farbgebung, um anzuzeigen, dass es sich um einen Vorschlag für eine Art von gültiger Eingabe handelt und nicht um tatsächliche Eingabedaten.

Es ist wichtig sicherzustellen, dass der Kontrast zwischen der Farbe des Platzhaltertextes und dem Hintergrund der Eingabe hoch genug ist, damit Personen mit Sehbeeinträchtigungen ihn lesen können. Gleichzeitig sollte ein ausreichender Unterschied zwischen der Farbe des Platzhaltertextes und der Eingabetextfarbe bestehen, damit Benutzer den Platzhalter nicht mit eingegebenen Daten verwechseln.

Das Farbkontrastverhältnis wird bestimmt, indem die Helligkeit des Platzhaltertextes und der Eingabehintergrundfarbenwerte verglichen werden. Um den aktuellen Richtlinien für barrierefreie Webinhalte (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 wird als 18,66px fett oder größer, oder 24px oder größer definiert.

• WebAIM: Color Contrast Checker
• MDN Verständnis von WCAG, Leitfaden 1.4 Erklärungen
• Verstehen des Erfolgskriteriums 1.4.3 | W3C Verständnis von 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 behindern, insbesondere für Menschen mit kognitiven Herausforderungen.

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

Mit dieser Implementierung sind die Hinweis-Inhalte selbst dann verfügbar, wenn Informationen in das Eingabefeld eingegeben werden, und die Eingabe erscheint frei von vorhandenen Eingaben, wenn die Seite geladen wird. Die meisten Screenreader-Technologien verwenden aria-describedby, um den Hinweis nach dem Vorlesen des Labeltextes der Eingabe anzukündigen, und die Person, die den Screenreader verwendet, kann ihn stummschalten, wenn sie die zusätzlichen Informationen für unnötig hält.

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

• Placeholders in Form Fields Are Harmful — Nielsen Norman Group

Platzhaltertext wird mit dem gleichen Stil wie vom Benutzer eingegebene Textinhalte angezeigt, wenn er im Windows High Contrast Mode gerendert wird. Dies macht es für einige Personen schwierig zu bestimmen, welche Inhalte eingegeben wurden und welche Inhalte Platzhaltertext sind.

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

• Placeholders in Form Fields Are Harmful — 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 opak. Wenn Sie vollständig opaken Text wünschen, setzen Sie den Wert der color Eigenschaft explizit fest. 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 formatiert ein Element, das einen aktiven Platzhalter hat.
• Verwandte HTML-Elemente: <input>, <textarea>
• HTML Formulare