Как отключить встроенное окрашивание фона при автозаполнении?

По гуглил, нашёл что то по типу очевидного, как всегда костыли:

input:-webkit-autofill {
  transition: all 5000s ease-in-out 0s;
}

или

-webkit-box-shadow: 0 0 0px 1000px (цвет который будет перекрывать) inset !important;

Псевдорешения:

autocomplete="off"

Ну и от себя я попрбовал:

.modal .input-container input:autofill,
.modal .input-container input:-webkit-autofill,
.modal .input-container input:-webkit-autofill-strong-password,
.modal .input-container input:-webkit-autofill-strong-password-viewable,
.modal .input-container input:-webkit-autofill-and-obscured {
  background-color: transparent !important;
}

Не помогло. Все тесты производились в safari

img


Ответы (1 шт):

Автор решения: De.Minov

Это очень печальная штука, которую добавил гугл, видите ли так лучше..

Было найдено такое решение:

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
textarea:-webkit-autofill:hover, {
  color: inherit !important;
  background-color: initial !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-transition: background-color 99999s ease-in-out 0s !important;
  transition: background-color 99999s ease-in-out 0s !important;
}

Оно решает проблему с фоном и цветом текста, но изменить шрифт не удалось.

→ Ссылка