CSS - Pseudo-class :autofill

The :autofill pseudo-class in CSS is used to style the appearance of the <input> element, whose value gets autofilled by the browser, indicating the user that their previous data has been saved and loaded in the form. As the user edits the field, the pseudo-class :autofill stops matching.

Many browsers, in their internal stylesheets, use important! against the -webkit-autofill style declarations, which can not be overriden by the webpages.

For best browser support, you should use both, -webkit-autofill and :autofill.

Syntax

input:autofill {
   /* ... */
}
:autofill pseudo-class is implemented with the vendor prefix: -webkit- in browsers Chrome, Edge, Opera.

CSS :autofill Example

The following example demonstrates use of :autofill pseudo-class on an input element. As the text field tis autocompleted by the browser, the border and background-color of the input element changes.

<html>
<head>
<style>
   label {
      display: block;
      margin-top: 1em;
   }
   input {
      border: 3px solid grey;
      padding: 5px;
   }
   input:-webkit-autofill,
   input:-webkit-autofill:focus,
   select:-webkit-autofill,
   select:-webkit-autofill:focus {
      border-radius: 3px;
      border: 3px solid red;
      -webkit-text-fill-color: blue;
      box-shadow: 0 0 0px 1000px yellow inset;
   }
   input:autofill,
   input:autofill:focus,
   select:autofill,
   select:autofll:focus {
      border-radius: 3px;
      border: 3px solid red;
      -webkit-text-fill-color: blue;
      box-shadow: 0 0 0px 1000px yellow inset;
   }
</style>
</head>
<body>
   <h3>:autofill example</h3>
   <form method="post" action="">
      <label for="name">First Name</label>
      <input type="text" id="name" />
      <label for="name">Last Name</label>
      <input type="text" id="name" />
      <label for="email">Email</label>
      <input type="email" name="email" id="email" autocomplete="email" />
   </form>
</body>
</html>
Advertisements