Как переназначить user agent stylesheet для input?

Question

[ApachEsH]

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


Если стереть текст, то снова становится зеленым. Через код элемента понял от куда ноги растут, в user agent stylesheet прописываются дефолтные стили браузера, но проблема в том, что переназначить их не получается. Ничто импуты перекрывать не может, ибо нет css кода связного с ними

Answer 1

[pupenne]

Как я понял напрямую цвет BG поменять нельзя, но немного ̶к̶о̶с̶т̶ы̶л̶е̶й̶ смекалки всегда поможет. Нам нужен псефдокласс " :-webkit-autofill ".

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: green;  // Цвет текста
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;  // Тенью во внутрь делаем BG и вместо #000 выбираем цвет BG
  transition: background-color 5000s ease-in-out 0s; // Так-как напрямую с BGC взаимодействовать нельзя, делаем его замену очень медленной, и как-бы отменяем его замену. (хотя через 1.5 часа он таки поменяет цвет)
}

Answer 2

[Александр Аксентьев]

autofill как бы намекает что это автозаполнение браузера срабатывает.

и даже слегка намекает как в css прописать чтобы эти стили изменить.