Input text very small when hovering on autofill suggestion

Question

In Google Chrome on MacOS (Version 75.0.3770.142) when I hover over an autofill suggestion the font size in the input becomes very small (also the font family changes) but after choosing the suggestion it goes back to the normal size.

What might be causing this behaviour?

Rawalpindi

What might be causing this behaviour? Probably the plugin you're using for the autofill – Schrock

related: https://mcmap.net/q/303793/-hovering-a-chrome-field-suggestion-shrinks-input .. there is some new default styles added by chrome for specific states (not easy to override) – Touchhole

@ZohirSalak, not a plugin, just the default Google Chrome behaviour. – Rawalpindi

Oh it's the auto fill for saved passwords and such, funnily enough i can't reproduce on Windows Chrome 75.0.3770.142 (64-bit) – Schrock

@ZohirSalak Yeah, I tested that on Chrome on Windows and it looks fine. It only breaks on a mac. I suppose it is a bug in Chrome and I just have to wait for a fix. I tried applying some styles from the other question Temani Afif mentioned but it doesn't seem to affect the font size (border color works for example). – Rawalpindi

This bug has been annoying me for a few weeks now. My Chrome has updated twice since it started happening and it hasn't been fixed yet. Fingers crossed this is a bug and not a feature! – Southland

Possible duplicate of How to prevent Chrome from changing font when autofilling username/password? – Irreligion

@ThibaudColas It is not a duplicate because this issue happens only on a Mac and the linked issue happens only on Windows. – Rawalpindi

@KubaSzymanowski as far as I’ve been able to test myself the issue happens identically regardless of operating system, overriding both font-family and font-size. – Irreligion

I must've been mistaken then. In my tests it only happened on a Mac. This actually may very well be a duplicate. – Rawalpindi

Does anybody know if there is already an issue filed on Chrome/Chromium? This annoys me as well since a while now. – Paragrapher

the possible duplicate above's top answer points to a chromium CVE that likely caused this intentional change: bugs.chromium.org/p/chromium/issues/detail?id=916838 – Frederico

Possible duplicate of CSS AutoComplete font size – Jenine

Answer 1

There is a solution:

input:-webkit-autofill::first-line {font-size: 16px}

Archdeaconry

Thank you. But I notice its not just the font size but font family as well. – Wayland

this solution doesnt work anymore in latest versions of Chrome because of a security issue bugs.chromium.org/p/chromium/issues/detail?id=1035058 – Sailfish

Answer 2

Here is working solution that worked for me in 2021 for Chrome not to change font size on autocomplete suggest hover:

input#email {
  font-size: 2rem;
  color: blue;
}

input:-webkit-autofill::first-line {
      color: red;
      font-size: 2rem;
}

<input id="email"></input>

Also I noticed that for some reason display: flex conflicts with that code, take a look:

input#email {
  font-size: 2rem;
  color: blue;
  display: flex;
}

input:-webkit-autofill::first-line {
      color: red;
      font-size: 2rem; 
}

<input id="email"></input>

Rough

No longer working for me on macOS Chrome Version 95. – Yanirayank

Answer 3

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { // put your old style here }

Regulation