Overcoming Chrome's Autofill Font Change Challenge

When encountering Chrome's autofill feature on Windows, you may encounter an annoying font change issue. Upon hovering over saved usernames, the font size and style alter, disrupting your form's alignment. While you can apply a fixed width to the input to mitigate this problem, a more effective solution lies in preventing the font change altogether.

To accomplish this, you can utilize CSS rules specifically targeting the :-webkit-autofill pseudo-class. This pseudo-class applies to regions of the form automatically filled by Chrome's password manager. By applying important to the font family property within this rule, you can override Chrome's default behavior and maintain your desired font settings.

Here's an example of how you can implement this in SCSS:

input {
  &:-webkit-autofill {
    &,
    &:hover,
    &:focus {
      font-family: Times, "Times New Roman", serif !important;
    }
  }
}

Alternatively, you may only require the following rule:

input {
  &:-webkit-autofill::first-line {
    font-family: Times, "Times New Roman", serif !important;
  }
}

The ::first-line pseudo-element targets the first line of the input, which is typically where the autofill occurs.

By incorporating these CSS rules, you can effectively prevent Chrome's autofill font change, preserving the alignment and aesthetic of your login form.