.field:invalid { border-color: #dc2626; }Неполный или пустой обязательный email получает красную границу.
УРОК 87 ИЗ 100
Покажите недопустимое состояние поля
Измените границу email-поля, не прошедшего HTML-проверку.
ШАГ 1 · ИЗУЧИТЕ
Как это работает
:invalid соответствует элементу, не удовлетворяющему ограничениям HTML. Цвет — дополнительная визуальная обратная связь; сообщение и семантическая связь ошибки требуют отдельной логики в реальной форме.
.field { border-color: #dc2626; }Постоянная красная граница не отражает результат проверки элемента.
ШАГ 2 · ПРИМЕНИТЕ
Ваше задание
Задайте border-color: #dc2626 только для .field:invalid.
index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ
Что должно пройти
0%не проверено
- ○Недопустимое состояние использует #dc2626.
- ○Целевой элемент присутствует на странице.
Объясните логику решения
Псевдокласс считывает состояние, определённое типом email и атрибутом required.