:autofill

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Februar 2023⁩.

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

Probieren Sie es aus

label { display: block; margin-top: 1em; } input:is(:-webkit-autofill, :autofill) { border: 3px solid darkorange; }

<form> <p>Click on the text box and choose any option suggested by your browser.</p> <label for="name">Name</label> <input id="name" name="name" type="text" autocomplete="name" /> <label for="email">Email Address</label> <input id="email" name="email" type="email" autocomplete="email" /> <label for="country">Country</label> <input id="country" name="country" type="text" autocomplete="country-name" /> </form>

Hinweis: Die Benutzeragent-Stylesheets vieler Browser verwenden !important in ihren :-webkit-autofill-Stildeklarationen, sodass sie von Webseiten nicht überschrieben werden können, ohne auf JavaScript-Tricks zurückzugreifen. Zum Beispiel hat Chrome das Folgende in seinem internen Stylesheet:

css

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

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

Syntax

css

:autofill { /* ... */ }

Beispiele

Das folgende Beispiel demonstriert die Verwendung der :autofill-Pseudoklasse, um den Rahmen eines Textfeldes zu ändern, das vom Browser automatisch ausgefüllt wurde. Um zu gewährleisten, dass wir keine ungültige Selektorliste erstellen, werden sowohl :-webkit-autofill als auch :autofill mit einer toleranten Selektorliste unter Verwendung von :is() abgeglichen.

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden