Change Autocomplete Styles in WebKit Browsers

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*/
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;


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


  1. User Avatar
    Jon Kantner
    Permalink to comment#

    How do I get the autocomplete to happen? I tried submitting the form, but nothing happens.

    • User Avatar
      Geoff Graham
      Permalink to comment#

      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.

  2. User Avatar
    Jon Kantner
    Permalink to comment#

    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!

  3. User Avatar
    Permalink to comment#

    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-autofill on line 5 of the example.

    Alternatively, you don’t actually have to specify select, input, textarea separately.

    You can just do this:

    :-webkit-autofill:focus {}

    Definitely using this in my projects!

  4. User Avatar
    Permalink to comment#

    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.

    • User Avatar
      Joseph Izatt (@JosephIzatt)
      Permalink to comment#

      I doubt there is because the menu is handled by the browser.

  5. User Avatar
    Permalink to comment#

    Thank you! I have struggled with this all day.

  6. User Avatar
    Permalink to comment#

    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 :)

  7. User Avatar
    Vincent Rapide
    Permalink to comment#

    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.

  8. User Avatar
    Anthony Lalala
    Permalink to comment#


    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 –

    Does anyone knows how to fix that?

  9. User Avatar
    Emiliano Gonzalez
    Permalink to comment#

    Hmm this is not working for me..
    Any ideas? I’m on Chrome 61

    • User Avatar
      Franco Basaglia
      Permalink to comment#

      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

    • User Avatar
      Geoff Graham
      Permalink to comment#

      Yeah, Chrome has been updated since this snippet was created. It still works in Safari 11.

  10. User Avatar
    Gideon Apollo Bardelas
    Permalink to comment#

    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.

  11. User Avatar
    Jonz (@Jon47)
    Permalink to comment#

    It’s worth mentioning that color and background-color cannot be overridden – hence the -webkit-text-fill-color and 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.

  12. User Avatar
    Permalink to comment#

    @Tiago Coelho: Thank you, it works!

  13. User Avatar
    Chris Coyier
    Permalink to comment#

    Romain Mascia wrote in with a way

    to neutralise the autofill yellow background color without using box-shadow (it can be combined to it though!).

  14. User Avatar
    Permalink to comment#

    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 ?

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.