How to Prevent Font Changes During Chrome Autofill?

Prevent Font Changes during Autofill in Chrome

When autofilling username and password fields in Chrome on Windows using the built-in password manager, the font changes, which can disrupt alignments. This article aims to provide a fix preventing the font change.

Despite attempts to modify the input's CSS using : -webkit-autofill and !important tags, the font change persists. A more effective solution is to target the specific part of the input that undergoes the change.

By leveraging the :first-line pseudo-element, you can isolate and modify the first line of text within the autofilled input. The following CSS code will ensure that the font remains consistent:

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

This targets the first line of the autofilled input specifically, overriding the default font change. In some cases, other elements may also be affected by the font change. To address this, you can expand the CSS code to target additional components:

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

By applying these CSS modifications, you can prevent the font change in Chrome during autofill, maintaining the desired alignment of your login form.

The above is the detailed content of How to Prevent Font Changes During Chrome Autofill?. For more information, please follow other related articles on the PHP Chinese website!