:autofill

Die Pseudo-Klasse :auto-fill in CSS ermöglicht es uns, <input>-Elemente zu stylen, die vom Browser automatisch ausgefüllte Inhalte enthalten.

Nehmen Sie als Beispiel ein neues Registrierungsformular für Benutzer. Haben Sie jemals in ein Feld geklickt oder getippt und eine Dropdown-Liste mit Vorschlägen für die Eingabe gesehen?

Haben Sie bemerkt, wie die automatisch vervollständigten Felder einen gelben Hintergrund haben? So stylt der Browser ein Feld, wenn es automatisch ausgefüllte Inhalte enthält. :auto-fill ermöglicht es uns, dies mit unseren eigenen Stilen zu überschreiben oder zu erweitern.

input:auto-fill { 
  outline: 5px solid rgb(0 0 0 / .5);
}

Wann findet Autovervollständigung statt?

Das ist eine etwas knifflige Frage, da jeder Browser seine eigenen Einstellungen hat, die es einem Benutzer ermöglichen, die Autovervollständigung zu aktivieren oder zu deaktivieren.

Wenn Sie also Autovervollständigungsstile für ein Eingabefeld mit :auto-fill festlegen, bedeutet das nicht, dass sie tatsächlich angewendet werden. Der Benutzer muss die Autovervollständigung in den Browsereinstellungen aktivieren, damit die Funktion funktioniert und die Stile angewendet werden.

Die andere Möglichkeit, wie Autovervollständigung stattfinden kann, ist, wenn das Attribut autocomplete auf ein Formularfeld angewendet wird.

<input id="name" autocomplete="name">

Das Attribut ist jedoch eher eine Richtlinie als eine feste Regel, da es keine Möglichkeit gibt, die automatische Ausfüllung des Browsers direkt in CSS zu überschreiben, wenn sie deaktiviert ist. Der HTML Living Standard scheint dies in einer Notiz zu unterstützen.

Eine Möglichkeit, wie solche automatischen Ausfüllungen stattfinden könnten, ist über das Attribut autocomplete, aber Benutzeragenten könnten auch ohne dieses Attribut automatisch ausfüllen.

Und in den meisten Fällen scheint dies der Fall zu sein – zumindest in unseren Tests.

Das HTML-Attribut autocomplete kann verwendet werden, um bestimmte Felder mit einem Token abzugleichen, das bestimmten Feldern zugeordnet ist. Sehen Sie sich die Spezifikation für eine vollständige Liste der verfügbaren Tokens an.

Überschreiben von Benutzeragenten :auto-fill-Stilen

Browser bringen oft ihre eigenen Stile mit. Wir nennen diese User Agent (UA) Stile und sie sind der Grund, warum wir Dinge wie CSS Resets haben, um sie für konsistente browserübergreifende Initialstile zu überschreiben.

Wir haben bereits gesehen, dass Chrome eine hellgelbe background-color für automatisch ausgefüllte Inhalte anwendet. Die UA-Stile von Chrome beinhalten

input:-internal-autofill-selected {
    appearance: menulist-button;
    background-image: none !important;
    background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
    color: fieldtext !important;
}

Laut MDN ist das Überschreiben dieser Stile etwas, das wir in CSS nicht tun können, aber dieser Ausschnitt von Geoff scheint den Trick zu machen, indem er einen box-shadow verwendet, um die background-color zu ändern, während -webkit-text-fill-color verwendet wird, um die Textfarbe zu ändern.

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #31b0dd;
  -webkit-box-shadow: 0 0 0px 40rem #ffff inset;
}

Demo

Hier ist ein einfaches Anmeldeformular, das mehrere Eingaben akzeptiert. Beachten Sie, dass beim automatischen Ausfüllen von Informationen eine Animation auf der outline-Eigenschaft ausgelöst wird. Aber stellen Sie sicher, dass Sie die automatische Ausfüllung in Ihren Browsereinstellungen aktiviert haben, damit sie funktioniert. Selbst dann muss der Browser möglicherweise Informationen für die Felder erfassen und speichern, bevor er Vorschläge machen kann.

Browser-Unterstützung

Auch hier ist zu beachten, dass :auto-fill derzeit im HTML Living Standard definiert ist und nicht offiziell in den Spezifikationen der CSS Working Group definiert wurde. Daher hat kein Browser :auto-fill vollständig implementiert, unterstützt aber die Vendor-Präfix-Version -webkit-autofill. Die obige Support-Tabelle spiegelt die Unterstützung für die Präfix-Version wider.

Verwandte Tricks!