:autofill

Baseline 2023

Newly available

Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die :autofill CSS-Pseudoklasse trifft zu, wenn ein <input>-Element vom Browser automatisch ausgefüllt wird. Die Klasse hört auf, übereinzustimmen, wenn der Benutzer das Feld bearbeitet.

Probieren Sie es aus

Hinweis: Die Benutzeragenten-Stilvorlagen (user agent style sheets) vieler Browser verwenden !important in ihren :-webkit-autofill-Stildefinitionen, wodurch sie von Webseiten nicht ohne den Einsatz von JavaScript-Hacks überschrieben werden können. Zum Beispiel hat Chrome Folgendes in seiner internen Stilvorlage:

css

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

Das bedeutet, dass Sie background-color, background-image oder color in Ihren eigenen Regeln nicht festlegen können.

Syntax

css

:autofill {
  /* ... */
}

Beispiele

Das folgende Beispiel zeigt die Verwendung der :autofill-Pseudoklasse, um den Rahmen eines Textfelds zu ändern, das vom Browser automatisch ausgefüllt wurde. Um zu gewährleisten, dass keine ungültige Selektorliste erstellt wird, werden sowohl :-webkit-autofill als auch :autofill mithilfe einer fehlertoleranten Selektorliste mit :is() kombiniert.

css

input {
  border-radius: 3px;
}

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

html

<form method="post" action="">
  <label for="email">Email</label>
  <input type="email" name="email" id="email" autocomplete="email" />
</form>

Spezifikationen

Specification
HTML # selector-autofill
Selectors Level 4 # selectordef-autofill

Browser-Kompatibilität

BCD tables only load in the browser