4

Sometimes the autofill of Chrome sets an extra shadow pseudo class to my input, that uses the style: 

<div pseudo="-internal-input-suggested" id="placeholder" style="display: block !important;">a....od@gmail.com</div>

It has the browser intern CSS of:

input::-internal-input-suggested, textarea::-internal-input-suggested {
    font: 400 11px system-ui !important;
}

I don't know why, but I just cannot overwrite this. How would you fix it?

This problem leads to the wrong using of font-family and font-size:

enter image description here (It's way too small)

enter image description here

This does not work:

input::-internal-input-suggested {
    font: unset !important;
}
Philipp Mochine
  • 4,351
  • 10
  • 36
  • 68
  • 1
    Yes. This is awful. It is totally hiding a date widget in my app. – lemming Aug 06 '19 at 13:54
  • 1
    Star it, to follow the issue and rise attention: https://bugs.chromium.org/p/chromium/issues/detail?id=991157 – RiZKiT Aug 06 '19 at 13:59
  • Possible duplicate of [How to prevent Chrome from changing font when autofilling username/password?](https://stackoverflow.com/questions/56026043/how-to-prevent-chrome-from-changing-font-when-autofilling-username-password). See my answer there – tl;dr; this is intentionally not overrideable anymore :/ – Thibaud Colas Aug 06 '19 at 15:32
  • @ThibaudColas it's very similar to my problem, but without showing the pseudo class. Nonetheless, I am still going to accept this as a duplication. – Philipp Mochine Aug 07 '19 at 13:36

0 Answers0