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.
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.
I doubt there is because the menu is handled by the browser.
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.
Hello!
I’ve also fixed the problem this way – thank you. But still have an issue with a cursor – actually you can see it in your demo on the page — even if you have style different from autofill’s – after you use it your cursor goes black, while it should be green, but it’s black – http://joxi.ru/Vrwn36QH96NGAX
Does anyone knows how to fix that?
Hmm this is not working for me..
Any ideas? I’m on Chrome 61
I’m on Chrome 63 and it neither work. I research about it, and in the developer’s site of Mozilla says that this is a feature non-standard, and ‘there may also be large incompatibilities between implementations and the behavior may change in the future’. I suppose that the behavior has changed across the new versions of Chrome
Yeah, Chrome has been updated since this snippet was created. It still works in Safari 11.
OK, this is great and all, but how about the suggest list that appears below the input field? Can we customize also the way it looks through webkit? I want it to customize it so that it will seamlessly like a part of my projects using CSS frameworks.
It’s worth mentioning that color and background-color cannot be overridden – hence the
-webkit-text-fill-colorand box-shadow hack. I speculate that any values specified in the user agent defaults (which currently also includes background-image) for this selector are impossible to override.actually I found a solution to override that with keyframes:
https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
@Tiago Coelho: Works like a charm – you are awesome! =D
@Tiago Coelho: Thank you, it works!
Romain Mascia wrote in with a way
I can see that “transition” works perfectly, even without “box-shadow”, to disable the yellow background of the Chrome autocomplete style, but I don’t really understand how / why, can somebody explain ?
Does anyone know how to complete disable the autofill popup via HTML?
Your example leaves the autocomplete field static on the screen if you scroll. Not a good look. This entire autocomplete thing that Chrome is doing is the WORST. I can’t believe you can’t disable it. I have tried everything including programmatically adding a zero-width nonprinting character to any focused blank field. But then, chrome pops up a blank window (covering my labels) Chrome really needs to get this figured out. What a complete mess.
Thanks for your help though.
Worked great in Chrome, FF and Midori! Should we care – or add some lines – for other browsers?
Thanks you! good code
Why do you set the spread to 1000px? -webkit-box-shadow: 0 0 0px 1000px #000 inset;
The autocomplete styles have changed in WebKit since this was published. If I remember correctly, that was one way to offset one of its default styles.
I came here because I’m trying to avoid the jump of the font-size after a users selects an autocomplete option. However it doesn’t seem to have any effect, have you ever accomplished this by changing WebKit styles?
I was about the same thing. Hovering over a selection in the demo displays it as small text in the input, then selecting the option causes the text to become much larger.
Someone found a solution for this?
I tried with the animation workaround but couldn’t get it working
and I tried the suggestion from ‘wojtekmaj’ (see further below) but that didn’t work either.
Thanks, very helpful article! I do have one suggestion though: when the autocomplete styling is active, it’s useful to manually set
caret-color=#ffffff(or whatever desired color for contrast) if the background color of the autocomplete field is dark.This is now out of date with the latest Chrome update
I just tried to rewrite this result in a cleaner way. This is still working in my browser, btw.
transition: background-color 0s;
transition-delay: 600s;
I tried this but how do I change the
font-sizeof the autofill?For -webkit-autofill, this worked for me:
This code does not work if you try to set the background colour, i.e.
background-color: red
Does anyone know how to do this?
WebKit’s default
-webkit-box-shadowproperty value needs to be overridden, which is how I changed the background color on auto-fill:-webkit-box-shadow: 0 0 0px 1000px #000 inset;Change the
#000value to another color, and you should be good!Anyone facing issues with this on chrome+iOS?
Fun fact: it’s working nice on Safari+iOS