5

I am having difficult time setting the input font-size when input is autofilled in chrome and edge. I am able to get the desired color and border, but not the font-size. Also line-height seems to change to the value of desired font-size. Correct font-size is applied when I click on the page content. Suprisingly everything works fine in firefox.

Chrome version: 97.0.4692.71

Edge version: 96.0.1054.62

Firefox version: 95.0.2

CSS rule I am using at the moment to achive that:

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 {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  font-size: 24px !important;
}

Thanks!

Jack
  • 61
  • 1
  • 5
  • Does this answer your question? [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) – Leo Jan 07 '22 at 01:11
  • Unfortunately not. The above solution works in case of changing color, but not for font-size. – Jack Jan 07 '22 at 14:33
  • Well, the only thing I can add is that, Chrome and Edge share the same behaviour surely because they use the same rendering engine (Blink, used also by Opera), while Firefox uses a different one (Gecko). I hope at least it gives you an idea of why it happens sometimes and sometimes not. – Leo Jan 07 '22 at 21:17

0 Answers0