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

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.