:autofill

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.

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

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

: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. For the best browser compatibility use both :-webkit-autofill and :autofill.

input {
  border: 3px solid grey;
  border-radius: 3px;
}

input:-webkit-autofill {
  border: 3px solid blue;
}
input:autofill {
  border: 3px solid blue;
}

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

Specifications

Specification
HTML Standard (HTML)
# selector-autofill

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
:autofill
96
1
96
79
86
86
No
15
preview
3
96
1
96
18
86
86
14
1
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill