Style Autofill or Autocomplete Default Browser Dropdown

Question

Is there some type of css prefix, plugin, javascript, or jquery that allows you to style the default browser autocomplete/autofill dropdown. Not for a search field... but for <input type="email">

I already use input:-webkit-autofill, input:-webkit-autofill:hover, and input:-webkit-autofill:first-line to change the appearence of the yellow background, the font-family, color, etc. (in Chrome)

Now I'm trying to override the default look of the dropdown - which is generated by your browser.

1. I'm trying to customize the appearence, text color, :hover color, font, etc. for all Username/Email autofill dropdowns.

2. I do not want to specify a data-list, or have any prefdefined variables...

3. I do not want to turn autocomplete="off"

I use dropkick.js to customize all of my <select> dropdowns - and change them into <ul> elements.

I am wondering if something like this exists for customizing all the other autofill or autocomplete dropdowns in a similar way.

Is this even possible?

Answer 1

As of now it seems that there's no way to change this in Chrome. I'd definitely call it a bug.

However, a decent workaround is to set the font-family for all autofill-able inputs or inputs within forms that have autofill abilities to this:

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

This is a great cross-browser, cross-platform solution because it just takes whatever your system font is, which is exactly what Chrome seems to be doing for it's autofill font.

It also ensures that your forms are going to have readable fonts on whatever OS your user is using.

Answer 2

I had this identical question, unfortunately everything I've seen says that this can't be done in any sort of "native" way. The primary suggestion that most give is setting auto-complete to off and then building & styling your own, which in most instances is probably more work then it's worth.

Answer 3

I can't find a way to make it work corectly. It's definitely a bug in Chrome.

The best workaround I came up with is to add this css to all of your inputs that might be autofilled:

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

This will take your system font, no matter what system you are using, and apply it to the input. This is what Chrome is doing as well so the font won't change when you hover autofill options.