Vom Browser automatisch ausgefüllte Felder, die der Nutzer nicht bearbeitet hat, mit CSS :autofill hervorheben

Webfunktionen: :autofill

Verwenden Sie die CSS-Pseudoklasse :autofill, um Felder hervorzuheben, die automatisch ausgefüllt wurden (oder nicht), damit der Nutzer das Formular erfolgreich ausfüllen kann.

Implementierung

Wenn Sie ein Formularfeld hervorheben möchten, das vom Browser automatisch ausgefüllt (und nicht vom Nutzer bearbeitet) wurde, fügen Sie Ihrem CSS mit der Klasse :autofill einen Selektor hinzu. Dies kann für ein <input>-, <select>- oder <textarea>-Element verwendet werden.

Beim Gestalten von automatisch ausgefüllten Status müssen Sie die Best Practices für Barrierefreiheit im Internet beachten:

  • Mehrere Statusanzeigen: Verlassen Sie sich nicht nur auf die Rahmenfarbe, um den Status „Automatisch ausgefüllt“ anzuzeigen. Verwenden Sie mehrere Indikatoren wie Rahmenstärke und benutzerdefinierte Hintergrundschattierung, um sicherzustellen, dass der Status erkennbar ist.
  • Fokusindikatoren beibehalten: Entfernen Sie niemals Fokusumrisse (outline: none), ohne einen klaren, kontrastreichen Ersatz für Tastaturnutzer bereitzustellen.

Im folgenden Beispiel wird :autofill verwendet, um einen benutzerdefinierten Rahmen und Hintergrund sowie explizite Fokusstile festzulegen:

input:autofill,
input:-webkit-autofill {
  /* Multiple indicators: use both a distinct border and background color via box-shadow to avoid color-only state */
  border: 2px solid #2e7d32;
  box-shadow: 0 0 0 100vmax #e8f5e9 inset;
}

/* MANDATORY: Always provide an explicit focus indicator when styling autofilled states */
input:autofill:focus-visible,
input:-webkit-autofill:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

Wie in diesem Beispiel gezeigt, wird das Attribut box-shadow verwendet, um den Hintergrund anzupassen, da background-color nicht direkt in automatisch ausgefüllten Feldern überschrieben werden kann.

Verwenden Sie den richtigen CSS-Pseudoklassennamen.

Verwenden Sie nicht :auto-fill. Das ist falsch.

OBLIGATORISCH: Verwenden Sie :autofill, da dies der richtige Name der Pseudoklasse ist.

Fallback-Strategien

Die Pseudoklasse :autofill ist eine progressive Verbesserung. In Browsern, die diese Funktion nicht unterstützen, funktioniert das Formular weiterhin normal, aber die Eingaben werden nicht mit der benutzerdefinierten Hervorhebung für das automatische Ausfüllen versehen. Nutzer können das Formular weiterhin ausfüllen. Es sollte kein zusätzlicher JavaScript-Fallback verwendet werden.