Вот что говорит MDN про :-webkit-autofill:
Note: The user agent style sheets of many browsers use !important in
their :-webkit-autofill
style declarations, making them
non-overrideable by webpages without resorting to JavaScript hacks.
Cтили, добавляемые многими браузерами через user agent, содержат !important
в объявлении свойства :-webkit-autofill
, запрещая его перезапись без вмешательства хаков Javascript
Можно выкрутиться, применив хитрости:
1) в случае, если фон input
должен быть какого-либо цвета, но не прозрачный:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* можно изменить на любой вариант цвета */
-webkit-text-fill-color: #333;
}
в этом случае мы заливаем содержимое input
применением внутренней тени желаемого цвета поверх цвета фона, устанавливаемого user agent stylesheet
в Chrome
2) можно установить задержку на анимацию "пожелтения" фона на большой промежуток времени, тем самым давая возможность пользователю ввести свои данные и не увидеть желтый фон достаточно долго:
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s; /* выставляется желаемая задержка */
}
Подсмотрено на SO.com: Removing input background colour for Chrome autocomplete?