Удаление цвета фона ввода для автозаполнения Chrome?

277

3/20/2022

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

Вадим Пашаев

Вадим Пашаев

Инженер, веб-разработчик, путешественник

Хотите исправить цвета фона ввода для автозаполнения Chrome? В этой статье вы можете найти ответ
Регистрация товарных знаков
Craftum - создайте сайт за 15 минут
Домены, хостинг от reg.ru

В формах, Chrome автоматически заполняет поля электронной почты и пароля. Это абсолютно нормальное и удобная фишка, однако Chrome меняет цвет фона на бледно-желтый, который может очень сильно подпортить дизайн. Сейчас покажем как эту ситуацию можно исправить.

Код ниже прекрасно работает, вы можете изменить стили ввода поля, а также стили текста внутри поля ввода:

Здесь вы можете использовать любой цвет, например white, #DDD, rgba(102, 163, 177, 0.45).

Но transparent здесь не сработает.

Для справки
/* Можно изменить белый на любой другой цвет ;)*/
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Как можно изменить цвет текста:

/* Изменение цвета автозаполнения */
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

Совет: не используйте большой радиус размытия (сотни или тысячи). Это бесполезно и может привести к загрузке процессора на более слабых мобильных устройствах. (Также верно для реальных внешних теней). Для обычного поля ввода высотой 20px «радиус размытия» 30px будет его полностью охватывать.

Для справки

Подписаться на рассылку

Получите лучшие новости по веб-разработке и AI

Подписаться на рассылку

Получите лучшие новости по веб-разработке и AI

Оценка проекта

Хотите быструю оценку Вашего проекта?

Василий Иванов
Максим Насенников
Виктория Мальцева
Vadim Pashaev

Заполните форму справа и наша команда экспертов поможет найти для Вас оптимальное решение вашей идеи или задачи

Есть интересная идея?

И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию