CSS/Selektoren/autofill

Browserunterstützung
caniuse.com

Der :autofill-Selektor ist eine dynamische Pseudoklasse, wenn der Wert eines <input>-Elements vom Browser automatisch ausgefüllt wird. Die Klasse hört auf zu übereinstimmen, wenn der Benutzer das Feld bearbeitet.

Syntax

:autofill {}

anwendbar auf

Formular-Elemente

Beispiel

input {
  border-radius: 3px;
}

input:is(:-webkit-autofill, :autofill) {
  border: 3px dotted orange;
}

Die Pseudoklasse :autofill färbt den Rahmen eines Textfeldes, das vom Browser automatisch ausgefüllt wurde. Um sicherzustellen, dass keine ungültige Selektor-Liste erstellt wird, werden sowohl :-webkit-autofill als auch :autofill mithilfe einer toleranten Selektorenliste mit :is() abgeglichen.

Beachten Sie: Die User-Agent-Stylesheets vieler Browser verwenden !important in ihren :-webkit-autofill-Stildeklarationen, wodurch sie von Webseiten nicht überschrieben werden können, ohne auf JavaScript-Hacks zurückzugreifen. Beispielsweise enthält Chrome in seinem internen Stylesheet Folgendes:

:webkit-autofill {
  background-color: rgb(232 240 254) !important;
  background-image: none !important;
  color: -internal-light-dark(black, white) !important;
}

Das bedeutet, dass Sie die Hintergrundfarbe, das Hintergrundbild oder die Farbe in Ihren eigenen Regeln nicht festlegen können.

Siehe auch

• Formulare
  • Eingabe von Text

Weblinks

• WHATWG: the :autofill pseudo-class Selectors Level 4
• MDN: :autofill
• Browser-Support: caniuse.com