Как запретить Chrome менять шрифт при автозаполнении имени пользователя/пароля?

Я не работаю в Windows, но вы пытались настроить таргетинг на метку и форму? Re: специфика css. Затем попробуйте автоматическое заполнение web-kit на всех

На данный момент кажется, что в Chrome это невозможно изменить. Я бы определенно назвал это ошибкой.

Тем не менее, достойный обходной путь — установить font-family для всех входных данных с возможностью автозаполнения или входных данных в формах, которые имеют возможности автозаполнения:

font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

Это отличное кросс-браузерное и кросс-платформенное решение, потому что оно просто принимает любой ваш системный шрифт, что, похоже, делает Chrome для своего шрифта автозаполнения.

Это также гарантирует, что ваши формы будут иметь читаемые шрифты в любой ОС, которую использует ваш пользователь.

Кажется, это недавнее изменение в Chrome: Проблема 953689: ранее введенные значения формы переопределяют стиль при наведении курсора мыши. Насколько я видел, это происходит как в macOS, так и в Windows, везде, где автозаполнение представлено конечному пользователю. По-видимому, это было сделано намеренно, чтобы исправить проблему безопасности с предыдущей реализацией — Проблема 916838: Безопасность: две уязвимости автозаполнения вместе позволяют сайтам незаметно считывать номера кредитных карт после одного нажатия клавиши..

Похоже, что на данный момент нет способа переопределить эти новые стили — если изменение стилей действительно слишком неприятно, вы можете либо отключить автозаполнение (Отключение автозаполнения Chrome), либо установить стили шрифта вашего поля (font-family, font-weight, font-style, font-size). чтобы соответствовать предложениям автозаполнения Chrome — как предлагается здесь: https://stackoverflow.com/a/56997845/1798491)

попробуй это!

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

вам может понадобиться только это, хотя

     &:-webkit-autofill::first-line

остальные на всякий случай

Как изменить стили автозаполнения Chrome при вводе:

input {
...
font-family: $body-font;
font-size: 1rem;
font-weight: bold;
color: #000;
background-color: #fff;
  
// Background color
&:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
  
// Font styles
&:-webkit-autofill::first-line {
  font-family: $body-font;
  font-size: 1rem;
  font-weight: bold;
  // color: green;
}

}

Вот рабочее решение, которое сработало для меня в 2021 году, чтобы Chrome не менял шрифт в полях ввода пароля/имени пользователя:

input#username {
  font-family: "Rubik";
  font-weight: bold;
  color: blue;
}

input:-webkit-autofill::first-line {
      color: red;
      font-family: "Rubik"; 
      font-weight: bold;
}

<link href = "https://fonts.googleapis.com/css?family=Rubik&display=swap" rel = "stylesheet">
<input id = "username" name = "username"></input>

Также я заметил, что по какой-то причине display: flex конфликтует с этим кодом, взгляните:

input#username {
  font-family: "Rubik";
  color: blue;
  font-weight: bold;
  display: flex;
}

input:-webkit-autofill::first-line {
      color: red;
      font-family: "Rubik";
      font-weight: bold;
}

<link href = "https://fonts.googleapis.com/css?family=Rubik&display=swap" rel = "stylesheet">
<input id = "username"></input>