Устраняем жёлтый фон автозаполнения форм в Chrome

Быстрый ответ

Если вас напрягает жёлтый фон автозаполнения в Chrome, примените приведённый ниже CSS-код:

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

Этот CSS-сниппет создаёт внутреннюю тень белого цвета, которая надёжно скрывает стандартный жёлтый фон автозаполнения, при этом не затрагивая остальные стили.

Управление внешним видом поля во время автозаполнения

Псевдоклассы CSS позволяют нам контролировать внешний вид элементов формы в состоянии автозаполнения. С помощью свойств transition и -webkit-text-fill-color можно обеспечить плавное изменение цвета фона и сохранить чёткость отображаемого текста:

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active  {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #000 !important;
}

Предложенный способ обеспечивает легкость восприятия текста благодаря мягким переходам между цветами фона.

Адаптивность под аудиторию: настраиваем под Chrome

Если вам необходимо применить определённые стили или скрипты исключительно для пользователей Chrome, воспользуйтесь определением юзер-агента через JavaScript:

if (navigator.userAgent.indexOf("Chrome") != -1) {
    // Реализация кода для пользователей Chrome
}

Обратите внимание, что полагаться на строку юзер-агента может быть рискованно из-за её возможных изменений.

Не забываем о доступности

Модификации дизайна форм не должны затруднять их использование. Автозаполнение – важная функция, облегчающая взаимодействие с формой для большинства пользователей.

Визуализация

Представьте нашу борьбу с жёлтым фоном автозаполнения как игру. Ваша веб-форма – это холст, который функция автозаполнения Chrome окрашивает в жёлтый. При этом, ваш код CSS – это щит, который помогает сохранить оригинальные цвета формы:

input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px white inset;
}

/* 🛡️ – Наш щит от нежелательного жёлтого цвета */

Форма до применения CSS: [📄🎨(жёлтый фон)] Форма после: [📄🛡️(белый фон)]

Изучите возможность отключения автозаполнения в Chrome

Для отключения функции автозаполнения можно использовать атрибут autocomplete="off":

<input type="text" name="field" autocomplete="off">

Но необходимо учитывать, что современные браузеры часто игнорируют этот параметр, отдавая предпочтение сохранению пользовательских настроек.

Целевое удаление стилей при загрузке

Эффективным решением может оказаться применение JavaScript или jQuery для корректировки стилей автозаполнения сразу после загрузки страницы. Пример скрипта:

$(window).load(function(){
    // Очистка стилей автозаполнения после загрузки страницы
});

Дублирование элементов ввода также возможно:

$('input').each(function(){
    if ($(this).is(':autofill')) {
        $(this).clone(true, true).insertBefore(this).prev().add(this).toggle();
    }
});

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

Гладкие переходы

Применение transition поможет сделать изменения в дизайне формы более плавными:

input:-webkit-autofill {
    transition: background-color 0.5s ease-out, color 0.5s ease-out;

Такие плавные переходы улучшат впечатления от использования сайта.

Тестирование в разных браузерах

Проверьте, как ваши решения работают в различных браузерах, чтобы не ухудшить пользовательский опыт.

Полезные материалы

1. Removing input background colour for Chrome autocomplete? – Stack Overflow — обсуждение в сообществе Stack Overflow о способах удаления жёлтого фона автозаполнения в Chrome.
2. Change Autocomplete Styles in WebKit Browsers | CSS-Tricks — подборка советов по оформлению автозаполнения для браузеров на движке WebKit.
3. HTML attribute: autocomplete – HTML: HyperText Markup Language | MDN — детали работы атрибута autocomplete.
4. HTML input tag – W3Schools — информация о теге input в HTML.
5. Can I use... Support tables for HTML5, CSS3, etc — коматибельность атрибута autocomplete в разных браузерах.
6. HTML Standard — самые свежие данные о механизмах автозаполнения форм.
7. Autofill | web.dev — инструкция по реализации автозаполнения для улучшения юзабилити форм.