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
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;
}Demo
See the Pen Change Autocomplete Styles in WebKit by CSS-Tricks (@css-tricks) on CodePen.
How do I get the autocomplete to happen? I tried submitting the form, but nothing happens.
It’s a setting within your browser. It’s pretty funky. For example, if you have previously dismissed the autocomplete suggestion in a fields, then it will no longer offer those suggestions–at least, that’s how it is today.
I got it now. In my Chrome settings, I just needed to check “Enable Autofill to fill out web forms in a single click” and add a street address in “Manage Autofill settings”. Pretty cool!
Might I just say that this is awesome!
Also, the’s a missing comma in the CSS at the end of line 4 and an extra declaration of
input:-webkit-autofillon line 5 of the example.Alternatively, you don’t actually have to specify
select,input,textareaseparately.You can just do this:
Definitely using this in my projects!
Is there any way to style the drop down menu as well? Would be cool to add styling to that. I’m also facing an issue where it overlaps a modal and would like to adjust the Z-index on the dropdown part.
Thank you! I have struggled with this all day.
Thank you so much! This one has bugged me for almost 2 years now.
By matching the :-webkit-autofill styling with the default states, I was able to make the two states look identical. This was essential for me since the default yellow looked like garbage on my dark themed site.
Cheers :)
I want that garbagey yellow (or amber) background for reading newspapers where the pure white default bg burns thru my retinas. Years ago OS/2’s native browser offered easy to use choices for page bg. Need a clue here.