Отключение стилей автозаполнения

При авто-заполнении инпутов, Chrome выставляет следующие стили для авто-заполненных полей. Как эти стили перекрыть или отключить? Именно стили, а не само по себе автозаполение.


И следующий код не отключает стили автозаполнения:
input:-webkit-autofill { background-color: transparent !important; }

Ответ

Вот что говорит 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?