Преодоление проблемы с изменением шрифта автозаполнения Chrome

При использовании функции автозаполнения Chrome в Windows вы можете столкнуться с неприятной проблемой изменения шрифта. При наведении курсора на сохраненные имена пользователей размер и стиль шрифта изменяются, что нарушает выравнивание вашей формы. Хотя вы можете применить фиксированную ширину к входным данным, чтобы смягчить эту проблему, более эффективное решение заключается в полном предотвращении изменения шрифта.

Для этого вы можете использовать правила CSS, специально предназначенные для :-webkit-autofill. псевдокласс. Этот псевдокласс применяется к областям формы, автоматически заполняемым менеджером паролей Chrome. Применяя важное к свойству семейства шрифтов в этом правиле, вы можете переопределить поведение 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 изменение шрифта, сохраняя выравнивание и эстетику вашей формы входа.