How to Change Autocomplete Styles in WebKit Browsers

Here’s a tip for anyone wanting a method for changing the styles that WebKit browsers apply to form fields that have been auto completed.  This can be useful if you have a dark form background, as you will need to change the autofill  text color from black to white,  otherwise will confuse your potential customers and reduce lead generation.

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 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 input:-webkit-autofill, 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; }