Как перебить цвет input'а при автозаполнении в Chrome?

Question

[kunjut19]

При автозаполнении input'ов в Chrom'е они становятся бледно-синего цвета. Этот момент все портит, потому что ломает мой фиолетово-розово-зеленый дизайн сайта. Пытался перебить стиль браузера вот так:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

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

Comments

[Евгений]

https://stackoverflow.com/questions/54941772/is-go...
оно?

[kunjut19]

Евгений, оно, но ни одно решение не работает

[Евгений]

kunjut19, ты именно про заливку говоришь или про синюю рамку?

[Mark Lansky]

Евгений,

пример

[kunjut19]

Евгений, про заливку

Answer 1

[Mark Lansky]

Никак. Если и избавляться от этого, то только при помощи autocomplete="off"

Comments

[kunjut19]

а вообще, зачем так делать? к чему так жестко прописывать стиль?

Answer 2

[PetrNet]

Очень даже просто!
Решил так:
box-shadow: inset 20px 20px 0px 20px #f3f2eb

Comments

[Вячеслав Яшников]

Спасибо!

Answer 3

[AlexProWeb]

.input-field input:-webkit-autofill{
    -webkit-text-fill-color: var(--color) !important;
}

Можно так еще перекрасить сам цвет текста

Comments

[AlexProWeb]

только вот каретку не знаю как перекрасить при автокомлите