Почему при автозаполнении сохраняется заливка?

Как исправить непредусмотренную заливку при автозаполнении у инпутов формы?
  • 20 октября 2023 г. 8:28
Ответы на вопрос 2
При автозаполнении браузер заполняет поля формы данными, которые он ранее запомнил для этого экрана. Когда браузер автоматически заполняет поле, он также применяет стилизацию, включая цвет фона и текста. Иногда непредусмотренная заливка может возникать из-за того, что разработчик не предусмотрел установку отдельных стилей для полей формы в состоянии "автозаполнение".

Чтобы исправить непредусмотренную заливку при автозаполнении у инпутов формы, можно использовать CSS-селектор `:-webkit-autofill`. Этот селектор позволяет установить стили для полей, которые браузер заполняет автоматически.

Например, чтобы убрать заливку фона при автозаполнении у полей формы, можно добавить следующий CSS-код:

```css
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
}
```

В данном примере мы устанавливаем белый цвет фона и убираем любую заливку.

Можно также изменить цвет текста, добавить другие стили и адаптировать их под дизайн вашего сайта. Важно отметить, что каждый браузер может иметь свои префиксы для селектора `:-webkit-autofill`, поэтому возможно потребуется применение разных префиксов для разных браузеров.
- Примените стили из данной статьи, чтобы переопределить текущие. Вам не понадобится использовать !important. Примеры работающих стилей:
  - Цвет текста: #ffffff.
  - Тень блока: 0 0 0px 40rem #121212 внутри блока.
Похожие вопросы