Верх страницы
Обложка к записи Убрать желтый фон у полей с autocomplete в Google Chrome
Время для прочтения: 0 мин. 13 сек.

Убрать желтый фон у полей с 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; /* цвет текста */
}

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

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

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Комментарии
Подписаться
Уведомить о
guest

8 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
CTAPbIu_MABP
10 лет назад
CSharp “CPlusPlus” Java
CSharp “CPlusPlus” Java
8 лет назад

не работает

mihdan
8 лет назад
Ответить на  CSharp “CPlusPlus” Java

Что именно не работает?

Потому что я Gangster
Потому что я Gangster
7 лет назад

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

mihdan
7 лет назад
Ответить на  Потому что я Gangster

Всегда пожалуйста!

Михаил
Михаил
6 лет назад

Господи, шедеврально. Лучший браузер ever. Без костылей никуда.
Я, конечно, знаю, что Google традиционно не умеют в дизайн, но это как-то слишком.

Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы