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

516

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

Читать далее

Что такое Next.js и для чего он нужен? | PXSTUDIO
Что такое Next.js и для чего он нужен?

Next.js - это фреймворк, основанный на React, который позволяет создавать веб-приложения с улучшенной производительностью и улучше...

Формат микроразметки JSON-LD: Для чего он? | PXSTUDIO
Формат микроразметки JSON-LD: Для чего он?

В статье рассказываем о формате разметки JSON-LD. Какие у нее есть преимущества и как ее лучше внедрить. Знаний кода не потребуетс...

Лучшие практики SEO в Headless CMS на примере Strapi | PXSTUDIO
Лучшие практики SEO в Headless CMS на примере Strapi

Если вы хотите использовать автономную CMS, которая выделяется с точки зрения SEO? Вы наткнулись на нужную статью. В этом посте я ...

Стартовый шаблон Next.js + MUI5 + TypeScript | PXSTUDIO
Стартовый шаблон Next.js + MUI5 + TypeScript

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

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

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

Этот сайт защищен reCAPTCHA, применяются Политика конфиденциальности и Условия использования Google.

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

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

Этот сайт защищен reCAPTCHA, применяются Политика конфиденциальности и Условия использования Google.

Расскажите, что нужно сделать

Разберем задачу и предложим следующий шаг

Contact to pxstudio

Сайт, сервис, Telegram-бот, AI-интеграция или оптимизация текущего проекта — опишите ситуацию, а мы подскажем нормальный технический путь.

Этот сайт защищен reCAPTCHA, применяются Политика конфиденциальности и Условия использования Google.

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

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