Styling an autofill suggestion

Question

Pretty simple: I'm working on the CSS of inputs, but when Chrome (on MacOS) fills the input with a suggestion (autofill feature), it changes the font. Is there a way to override this to keep my custom font and the rest of the CSS properties?

The most disturbing is the fact that the field changes its height, this is really ugly...

Maybe I searched with the wrong keywords, but I didn't find anything...

Here is a quick sample to reproduce it with an email field, I hope you'll have suggestions in your browser:

input#email {
  font-size: 2rem;
  font-family: "Krub";
}

<link href="https://fonts.googleapis.com/css?family=Krub&display=swap" rel="stylesheet">
<input id="email"></input>

Thanks!

Answer 1

The non-standard chained pseudo-classes :-webkit-autofill:focus can be used to style focused input elements being autofilled in Chrome.

It appears however that Chrome is ignoring some properties affected to :-webkit-autofill:focus, such as color and font-family. The color of the text can be changed through the (non-standard) property -webkit-text-fill-color, but there is no other property that can be used to change the font of the text.

A solution could have been to use JavaScript to copy the hovered suggestion, append it to a new element, place that element on top of the input and style it as you want. This is not possible though, as the suggestions are not injected as input value, and the content of the select input added by Chrome is not accessible either (probably both for security reasons).

You can however mitigate the issue by either:

• preventing Chrome from autocompleting by setting autocomplete="off" on the input element;
• setting height and width to the input to prevent it from changing size as the user hovers suggestions.

Hope that helps.

Answer 2

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.