Change Autocomplete Styles in WebKit Browsers

Avatar of Geoff Graham
Geoff Graham on (Updated on )

We got a nice tip from Lydia Dugger via email with a method for changing the styles that WebKit browsers apply to form fields that have been autocompleted.

What we mean by autocomplete

Many browsers (including Chrome and Safari) provide a setting that allows users to automatically fill in details for common form fields. You have seen this when completing a form that asks for things like name, address, and email.

The catch is that users must have enabled this setting in order for this snippet to be effective. If the setting is enabled, then WebKit browsers will style the fields it has autocompleted for the user, like so:

Notice how the autocompleted fields have a yellow background? That’s what we’re referring to and going to change with this snippet.

The Snippet

We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit. The default styling only affects the background color, but most other properties apply here, such as border and font-size. We can even change the color of the text using -webkit-text-fill-color which is included in the snippet below.

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

Demo

See the Pen Change Autocomplete Styles in WebKit by CSS-Tricks (@css-tricks) on CodePen.