CSS font family issue with autofill within a text input

Here is my partial answer in hopes of helping:

I am having the same problem in Chrome, where I would like to change the font-family inside the input text area on hover of the auto-fill options, but it seems like it's the one thing that won't change.

From my experimenting with changing the autocomplete styles in WebKit, as described in the CSS tricks tutorial and in your code snippet, I can change the border styles, the box-shadow styles, even the font-weight and font-style.

Because I am able to change the other properties of the font inside the text input area on hover, but not the font-family, I'm led to believe that this is either intentional or a bug by Chrome. I also noticed the example on CSS tricks behaves the same way: the font-family is the default on hover, but switches to Lato after it's selected. So, I believe this is expected with Chrome. If I could find some explicit documentation that font-family is not allowed to be changed here, I would be more satisfied, but this is the most I could conclude.

The solution here is input:-webkit-autofill::first-line selector.

It allows you to override default system font (and font size) during mouseover on autocomplete elements.