Стилизация предложения автозаполнения

Question

Довольно просто: я работаю с CSS для ввода, но когда Chrome (в MacOS) заполняет ввод предложением (функция автозаполнения), он меняет шрифт.Есть ли способ переопределить это, чтобы сохранить мой собственный шрифт и остальные свойства CSS?

Самым тревожным является тот факт, что поле меняет свою высоту, это действительно ужасно ...

Возможно, я искал с неправильными ключевыми словами, но ничего не нашел ...

Вот быстрый пример для воспроизведения его с полем электронной почты. Надеюсь, у вас будут предложения в вашем браузере:

input#email {
  font-size: 2rem;
  font-family: "Krub";
}

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

Спасибо!

Answer 1

Нестандартные цепочечные псевдоклассы :-webkit-autofill:focus можно использовать для стилизации целевых элементов ввода, автоматически заполняемых в Chrome.

Однако, похоже, что Chrome игнорирует некоторые свойства, влияющие на :-webkit-autofill:focus, такие какcolor и font-family.Цвет текста можно изменить с помощью (нестандартного) свойства -webkit-text-fill-color, но нет другого свойства, которое можно было бы использовать для изменения шрифта текста.

Возможно, решение было быиспользуйте JavaScript, чтобы скопировать подсказку, добавьте ее к новому элементу, поместите этот элемент поверх ввода и стилизуйте его так, как вам нужно.Однако это невозможно, так как предложения не вводятся в качестве входных значений, а содержимое входных данных выбора, добавленных Chrome, также недоступно (возможно, оба из соображений безопасности).

Однако вы можете решить эту проблему.либо:

• предотвращение автозаполнения Chrome путем установки autocomplete="off" для элемента ввода;
• установка высоты и ширины для ввода, чтобы предотвратить его изменение размера, когда пользователь наводит подсказки.

Надеюсь, это поможет.

Answer 2

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

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

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

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

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

Answer 3

Вы можете прочитать о изменении стиля автозаполнения в блоге CSS Tricks.

По сути, добавление следующего фрагмента позволит вам изменить шрифт. Вы также можете добавить любой другой стиль здесь, как показано в этой демонстрации CodePen .

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    font-family: Times;
}