: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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:autofill

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch