Псевдокласс CSS :invalid
Псевдокласс CSS :invalid выделяет элементы форм (такие как <input>, <select> и <textarea>), значение которых не соответствует заданным правилам валидации.
Селектор :invalid применяется к элементам форм с ограничениями валидации, например, к полям <input> с атрибутами min и max (для типов number, range и date), полям email без корректного адреса электронной почты, числовым полям без числового значения или обязательным полям с пустым значением.
Примечания
Радиокнопки
Если для группы радиокнопок требуется выбрать хотя бы одну, селектор :invalid применяется ко всем кнопкам в этой группе (если ни одна из них не выбрана). Радиокнопки в группе имеют одинаковое значение атрибута name.
Стандартные настройки Gecko
По умолчанию движок Gecko не применяет стили к псевдоклассу :invalid (хотя мы можем добавить красное «свечение» с помощью свойства box-shadow), но применяет стили к псевдоклассу :-moz-ui-invalid, который используется в ограниченном подмножестве случаев по сравнению с :invalid.
Взаимный псевдокласс
Для сравнения, псевдокласс :valid выделяет элементы форм, прошедшие проверку валидации.
Версия
Синтаксис
Код синтаксиса CSS :invalid
:invalid {
css declarations;
}Пример использования селектора :invalid:
Пример кода CSS :invalid
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:invalid {
border: 2px solid #ff0000;
}
</style>
</head>
<body>
<h2>:invalid selector example</h2>
<form>
<input type="email" value="invalid-email" required />
</form>
</body>
</html>Практика
Какова функция псевдокласса ':invalid' в CSS?