: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.

The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. The class stops matching if the user edits the field.

Try it

Note: The user agent style sheets of many browsers use !important in their :-webkit-autofill style declarations, making them non-overridable by webpages without resorting to JavaScript hacks. For example Chrome has the following in its internal stylesheet:

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

This means that you cannot set the background-color, background-image, or color in your own rules.

Syntax

css
:autofill {
  /* ... */
}

Examples

The following example demonstrates the use of the :autofill pseudo-class to change the border of a text field that has been autocompleted by the browser. To ensure we don't create an invalid selector list, both :-webkit-autofill and :autofill are matched using a forgiving selector list with :is().

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>

Specifications

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

Browser compatibility

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.

See also