~ 4 мин

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

294

3/20/2022

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

Вадим Пашаев

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

Перейти в профиль

Хотите исправить цвета фона ввода для автозаполнения Chrome? В этой статье вы можете найти ответ

В формах, 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 будет его полностью охватывать.

Для справки