Раздражающий желтый фон Google Chrome с автозаполнением поля ввода доставлял достаточно боли разработчикам. Это может не быть серьезной проблемой для большинства разработчиков, но это для людей, которые хотят развернуть прозрачные поля ввода и дизайн материала.
После быстрого исследования я обнаружил, что в настоящее время нет способа отключить это, даже с помощью объявления.
Код
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
}
Помимо соображений безопасности и удобства использования, на мой взгляд, мы должны иметь возможность полностью контролировать эстетику стилей форм при разработке сайта или веб-приложения. В популярной статье об уловках CSS есть попытка решить эту проблему, где в ней содержится фрагмент для стилизации фона ввода автозаполнения Chrome, однако он больше не работает.
Вы можете косвенно удалить желтый фоновый цвет, скрывая ввод большой вставленной тенью белого поля:
Код
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
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 0px 1000px white inset!important;
}
Вышеприведенный фрагмент работает, который довольно агрессивен, что если вы хотите применить более одной тени от блока к входу; например, когда вход был сфокусирован. И здесь вы можете просто связать свои теневые объявления в блоке:
Код
input:focus,
input:-webkit-autofill:focus {
-webkit-box-shadow: 0 0 0px 1000px white inset,
0 0 8px rgba(64, 197, 220, 0.8);
}
