:autofill

Try it

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>

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

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Nov 3, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content