:autofill CSS Pseudo Class
Description
The CSS :autofill pseudo-class matches when an <input> element has its value autofilled by the browser, such as when a user saves their form data for future use. This can happen when a user clicks on a field and sees a dropdown of suggestions for what to enter, or when a user's browser automatically fills out a form with data that has been saved previously.
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. For example, you could use the :autofill pseudo-class to change the border color of an input field to green when it has been auto-filled, or to display a tooltip that says "Your previously saved data has been loaded."
To use the :autofill pseudo-class, simply add it to the selector for your <input> element. For example, the following CSS would change the border color of all input elements that have been auto-filled to green:
input:autofill {
border-color: green;
}
It is important to note that the :autofill pseudo-class is not supported by all browsers. For best browser compatibility, you should use the following CSS:
input:-webkit-autofill, input:autofill {
border-color: green;
}
This will ensure that your styles are applied to all browsers, even those that do not support the
:autofill pseudo-class natively.Here is an example of how to use the :autofill pseudo-class to style a login form:
<form action="/login" method="post">
<label for="email">Email</label>
<input type="email" name="email" id="email" autocomplete="email">
<label for="password">Password</label>
<input type="password" name="password" id="password" autocomplete="password">
<button type="submit">Login</button>
</form>
input:-webkit-autofill, input:autofill {
border-color: green;
}
input:-webkit-autofill::-webkit-text-fill-color,
input:autofill::-webkit-text-fill-color {
color: black;
}
This CSS will change the border color of the email and password input fields to green when they have been auto-filled. It will also change the text color of the autofilled fields to black, so that the user can easily see what data has been loaded into the form.
The
:autofill pseudo-class can be a useful tool for styling form elements. It can help to improve the user experience by making it clear to users what data has been auto-filled, and by allowing you to customize the appearance of autofilled fields.Syntax
:autofill {
/* ... */
}
Example
<form>
<p>Click on the text box and choose any option suggested by your browser.</p>
<label for="name">Name</label>
<input name="name" type="text" autocomplete="name" />
<label for="email">Email Address</label>
<input name="email" type="email" autocomplete="email" />
<label for="country">Country</label>
<input name="country" type="text" autocomplete="country-name" />
</form>label {
display: block;
margin-top: 1em;
}
input:autofill {
border: 3px solid darkorange;
}Browser Support
The following table will show you the current browser support for the CSS :autofill pseudo class.
| Desktop | |||||
 |
 |
 |
 |
 |
|
| 79 | 1 | 86 | 15 | 15 | |
| Tablets / Mobile | |||||
|
|
|
|
 |
 |
| 18 | 86 | 14 | 15 | 1 | 4.4 |
Last updated by CSSPortal on: 1st October 2023