CSS псевдокласс :invalid Приветствую коллеги! Я думаю что довольно часто кто-то из нас встречался с задачей где невалидный инпут нужно как-то стилизовать и вывести допустим ошибку. Я обычно для добавления стилей использовал добавление класса, например .error. Оказывается в CSS, есть псевдокласс :invalid, причем довольно давно и я реально не знал о нем. Так вот он в целом упрощает нам жизнь если у нас относительно не сложная логика валидации и мы хотим стилизовать ошибочный input или форму в которой есть ошибочный input. А теперь к примеру. HTML <form> <label>Введите URL:</label> <input type="url" /> <br /> <br /> <label>Введите эл. почту:</label> <input type="email" required/> </form> CSS input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } Итог: если мы введем что-то не похожее на email или url то будем иметь стилизованную form и input. ❗ P.S. Так же у нас есть псевдокласс :valid, в целом думаю не нужно объяснять как он работает, все то же самое но наоборот. Удачи в экспериментах. #shortread #html #css