克服 Chrome 的自动填充字体更改挑战

在 Windows 上遇到 Chrome 的自动填充功能时，您可能会遇到烦人的字体更改问题。将鼠标悬停在已保存的用户名上时，字体大小和样式会发生变化，从而破坏表单的对齐方式。虽然您可以对输入应用固定宽度来缓解此问题，但更有效的解决方案在于完全防止字体更改。

要实现此目的，您可以利用专门针对 :-webkit-autofill 的 CSS 规则伪类。此伪类适用于由 Chrome 密码管理器自动填充的表单区域。通过将此规则中的 important 应用于字体系列属性，您可以覆盖 Chrome 的默认行为并维持所需的字体设置。

以下是如何在 SCSS 中实现此功能的示例：

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

或者，您可能只需要以下规则：

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

::first-line 伪元素定位输入的第一行，这通常是自动填充发生的地方。

通过合并这些 CSS 规则，您可以有效地阻止 Chrome 的自动填充字体更改，保持登录表单的对齐和美观。