Убрать желтый фон у полей с autocomplete в Google Chrome

В браузерных стилях Google Chrome для полей с autocomplete прописан желтый (#FAFFBD) фон и черный (#000000) цвет текста, усиленные при помощи !important, соответственно, переопределить их в пользовательских таблицах стилей нельзя. Выхода вижу всего два.

Первый способ

Можно тупо выключить автозаполнение для всей формы:

<form autocomplete="off"></form>

или для конкретного поля:

<input type="text" autocomplete="off" />

Это сработает, но пользователь вам спасибо не скажет, так как автозаполнение перестанет работать полностью.

Второй способ

Другим вариантом является задание большой внутренней тени для полей с цветом равным цвету желаемого фона:

 
input {outline: none;}
input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 50px #fff !important; /* Цвет фона */
    -webkit-text-fill-color: #999 !important; /* цвет текста */
    color: #999 !important; /* цвет текста */
}

Правда у этого способа есть один недостаток — нельзя задать фоновую картинку!

Ссылки по теме

Источник: https://www.kobzarev.com/makeup/remove-yellow-background-in-fields-with-autocomplete-in-google-chrome/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: