Беда с input. Как избавиться от выделения заполненного поля?

Question

[pinkfring]

При имеющихся свойствах

input, input:selection, input:focus {
	background:transparent;
	border:none;
	outline:none;
}

при автозаполнении всё-равно в некоторых браузерах поля подсвечены.
Есть ли надёжное кроссбраузерное решение, позволяющее игнорировать поведение поля при автозаполнении, которые перекрывают css?
На скрине показана разница.

Comments

[Михаил Р.]

Организуйте песочницу и разместите здесь.

[sergski]

-webkit-appearance: none;
border: none;
outline: none;
 background: transparent;

Answer 1

[Froggyweb]

https://habr.com/ru/articles/695194/

Comments

[pinkfring]

Всё бы хорошо, но Chrome и Yandex упорно игнорирует background: transparent;
Ну, и, как было упомянуто, в Safari особенно.

[Froggyweb]

2. Сделать фон прозрачным
Для сохранения прозрачного фона при автозаполнении часто используют "хак" с задержкой перехода, чтобы браузерные стили просто не успели примениться:

css

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: #fff;
}

[pinkfring]

Froggyweb, огромное спасибо. Простое решение, до которого сам не дошёл - всегда радует)))