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

Comments

  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
    ElijahFowler
    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,
    :-webkit-autofill:hover, 
    :-webkit-autofill:focus {}
    

    Definitely using this in my projects!

  4. User Avatar
    Nick
    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.

  5. User Avatar
    Marius
    Permalink to comment#

    Thank you! I have struggled with this all day.

  6. User Avatar
    timsilva
    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.

Submit 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.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag