:autofill

:autofill — псевдокласс, который совпадает с полями формы, куда браузер подставил значения из автозаполнения (например, адрес, телефон, email). Удобен для стилизации подсвеченных браузером полей и приведения их к стилю проекта.

        
          
          /* Подсветка полей, где сработало автозаполнение */input:autofill {  background-color: #0f1f33;  color: #FFFFFF;}
          /* Подсветка полей, где сработало автозаполнение */
input:autofill {
  background-color: #0f1f33;
  color: #FFFFFF;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          /* Цвет фона и текста у автозаполненных полей */input:autofill,textarea:autofill {  background-color: #0f1f33; /* тёмно-синий фон */  color: #FFFFFF;}/* Убираем возможные «системные» заливки */input:autofill {  -webkit-text-fill-color: #FFFFFF; /* для совместимости с WebKit */  transition: background-color 9999s ease 0s; /* прием против жёлтого фона */}
          /* Цвет фона и текста у автозаполненных полей */
input:autofill,
textarea:autofill {
  background-color: #0f1f33; /* тёмно-синий фон */
  color: #FFFFFF;
}

/* Убираем возможные «системные» заливки */
input:autofill {
  -webkit-text-fill-color: #FFFFFF; /* для совместимости с WebKit */
  transition: background-color 9999s ease 0s; /* прием против жёлтого фона */
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Браузер может визуально выделять автозаполненные поля (например, жёлтым в некоторых движках). Селектор :autofill позволяет переопределить это оформление, чтобы поля выглядели в едином стиле с остальными.

Важно: инициировать автозаполнение из JavaScript нельзя. Для демонстраций используют реальные атрибуты autocomplete и «мок»-классы, чтобы показать целевой дизайн.

💡 Прописывайте корректные значения autocomplete у полей, чтобы браузер предлагал уместные данные и чаще попадал в :autofill.
💡 Для WebKit-движков иногда нужен дополнительный хак с -webkit-text-fill-color и длинной анимацией фона, чтобы убрать жёлтую заливку.
💡 Не полагайтесь на :autofill для валидации — это лишь визуальное состояние, а не факт корректности данных.