Оставлю ответ и сам. На мой взгляд, это лучше вынести из комментариев, так как информация важная. В результате общения выяснилось, что по сути нам нужно перебить значение, которое выставляет сам Chrome, а именно:
input:-webkit-autofill {background-color: rgb(250, 255, 189);}
В случае, если это был бы обычный css, мы бы просто сделали примерно так (взял у пользователя из другого ответа):
input:-webkit-autofill {
box-shadow: inset 0 0 0 1000px #fff !important; /* Цвет фона */
-webkit-text-fill-color: #999 !important; /* цвет текста */
color: #999 !important; /* цвет текста */
}
Но задача стояла сделать это динамически. При этом по умолчанию .css()
не работает с important
:
Note: .css() ignores !important declarations. So, the statement $( "p"
).css( "color", "red !important" ) does not turn the color of all
paragraphs in the page to red. It's strongly advised to use classes
instead; otherwise use a jQuery plugin.
Выход был найден тут:
js:
$('#contact_us').find('input:-webkit-autofill').addClass('importantBackground');
css:
.importantBackground {
background-color: #BA383D!important;
}
}
Но в итоге ситуация стала явно похожа либо на баг в браузере, либо на попытку разработчиков браузера быть самыми умными. Не смотря на то, что в инспекторе мы видим вот это:
Фон все равно оставался желтым. Было испробовано и второе решение, которое предложил другой пользователь — отключить autofill после очистки формы и включать по получению полями фокуса на них.
$('#contact_us').find('input, textarea').attr('autocomplete', 'off');
Но и оно не помогло:
В итоге ответ был найден. Нужно использовать чистый js и на форме вызывать метод reset()
.