CSS :autofill pseudo-class Selector

The CSS :autofill pseudo-class refers to an input element that had its value automatically filled by the browser, such as when a user saves their form data for future use. The :autofill pseudo-class can be used to style the appearance of an input element that has been auto-filled, to indicate to the user that their previously saved data has been loaded into the form.

Syntax:

input:autofill {
 /* styles for input when it's autofilled */
}

Example 1: The following example shows how to use the :autofill pseudo-class to change the border of a text field to a "green" color that has been autocompleted by the browser. The email field has border-color green as it is autofilled. For the best browser compatibility, we have used both -webkit-autofill and :autofill.    

Output:

👁 Image

Example 2: The following example shows how to use the :autofill pseudo-class to change the font family of a text field that has been autocompleted by the browser. The email field has a different font family than the name field as it is autofilled.

Output:

👁 Image