:autofill
Baseline 2023Newly 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:
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
: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.
input {
border-radius: 3px;
}
input:is(:-webkit-autofill, :autofill) {
border: 3px dotted orange;
}
<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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
: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
- Chromium Issue 46543: Auto-filled input text box yellow background highlight cannot be turned off
- WebKit Bug 66032: Allow site authors to override autofilled fields' colors.
- Mozilla Bug 740979: implement
:-moz-autofill
pseudo-class on input elements with an autofilled value - User Interface Module Level 4: More Selectors