Chrome AutoFill / Autocomplete disappearing on hover and how to fix it
This disappearing AutoFill / Autocomplete problem in Chrome really caused me some headaches. It all stemmed from changing the main font in a website I working on to a new Google Font.
I noticed the autofill font didn’t match or inherit the Google font I used for the inputs, so it looked quite jarring when you select them. You can make some CSS tweaks to the autofill styling using the CSS selector below, but it is limited as to what you can do
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
/* insert styles here */
}
You can read a little more about the CSS autocomplete selector here.
But the main problem I was having was If you were at the bottom of the page, the slight font change from the autocomplete was causing the inputs to increase in size. This caused the popups to close immediately because there was no room at the bottom of the page for the inputs to expand in size.
As a fix, I set heights on the inputs so the font change couldn’t cause them to resize themselves. This stops the autocomplete box disappearing on hover. Its not ideal in all situations, but there are other ways around it like forcing the font size down in the code shown above.
I don’t like that the font is inconsistent between the autocomplete and the form fields, but at least the inputs are not resizing and more importantly the AutoFill / Autocomplete is not disappearing on hover. As far as I can tell, you can’t customise the actual font in the autocomplete list as it down to the user to set this themselves in the Chrome browser preferences.
I struggled to find any useful imformation about this all, so if you can shed some light on it any further for me, then please do here in the comments.
Hello Steven,
Please try this out it help me to solve this problem
input:-webkit-autofill::first-line{
font-family:’Roboto’;
font-weight:’400′;
font-size:’16px’;
font-style:’normal’;
}
Hope this is helpful for you too.
Hello Steven,
Please try this out help help to solve this problem
input:-webkit-autofill::first-line {
font-family: ‘Roboto’;
font-size: 18px;
font-weight: 400;
font-style: normal;
}
Hope this will work for you too.