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

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

В

Вадим Пашаев

3/20/2022

Хотите исправить цвета фона ввода для автозаполнения 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 будет его полностью охватывать.