Styling an autofill suggestion

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.

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.