Как убрать подсветку автозаполнения в CSS: полное кроссбраузерное решение

При разработке форм ввода данных веб-разработчики часто сталкиваются с проблемой: браузеры по-своему подсвечивают поля, заполненные через автозаполнение. Даже если вы задали background: transparent, border: none и outline: none, в Chrome, Firefox или Safari может появиться жёлтый или голубой фон. В этой статье мы разберём, почему это происходит и как это исправить.

Почему браузеры подсвечивают автозаполненные поля?

Современные браузеры (Chrome, Firefox, Safari, Edge) имеют встроенные стили для автозаполненных элементов. Они делают это для улучшения пользовательского опыта - чтобы пользователь видел, какие поля были заполнены автоматически. Однако эти стили имеют высокий приоритет и не переопределяются обычными CSS-правилами. Стандартные псевдоклассы :focus и :selection не влияют на автозаполнение.

CSS-решение для отключения подсветки

Чтобы убрать подсветку автозаполнения, нужно использовать специальные псевдоклассы для каждого браузера. Вот универсальный код:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #333 !important;
  transition: background-color 5000s ease-in-out 0s;
}

Как это работает

• -webkit-box-shadow - создаёт внутреннюю тень, которая перекрывает фоновый цвет браузера. Цвет тени задаёте под свой дизайн (например, white).
• -webkit-text-fill-color - задаёт цвет текста внутри поля, чтобы он не сбрасывался на дефолтный.
• transition - отключает анимацию смены фона, чтобы браузер не перерисовывал подсветку.

Кроссбраузерность и нюансы

Данный метод работает во всех современных браузерах на WebKit (Chrome, Safari, Opera, Edge на Chromium). Для Firefox используется свой псевдокласс :-moz-autofill, но на практике вышеуказанный код часто справляется и с Firefox. Если нет - добавьте:

input:-moz-autofill {
  background-color: transparent !important;
}

Альтернативные подходы

Отключение автозаполнения через HTML

Можно добавить атрибут autocomplete="off" к полю или форме. Однако это не всегда работает (браузеры игнорируют его для логинов и паролей) и ухудшает UX.

JavaScript-обход

Некоторые разработчики используют JS для принудительной смены стилей после загрузки страницы. Но это менее надёжно и замедляет рендеринг.

Рекомендации по тестированию

После внедрения CSS-решения обязательно проверьте формы в нескольких браузерах: Chrome, Firefox, Safari, Edge. Используйте режим инкогнито и сохраните тестовые данные для автозаполнения. Убедитесь, что фон и цвет текста соответствуют вашему дизайну.

Заключение

Убрать подсветку автозаполнения в CSS можно с помощью комбинации псевдоклассов :-webkit-autofill и свойств -webkit-box-shadow и -webkit-text-fill-color. Это кроссбраузерное решение работает в Chrome, Firefox, Safari и Edge, не требует JavaScript и сохраняет единый стиль формы.