CSS псевдокласс :invalid выбирает элементы <form> со значением, которое не соответствует параметрам элемента.
Селектор :invalid работает только для элементов <input> с атрибутами min и max, для type="number", значение которого число, а не буквы, для type="email" с корректным адресом электронной почты.
Версия
CSS3
Синтаксис
:invalid {
css declarations;
}Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
input:invalid {
border: 2px solid #ff0000;
}
</style>
</head>
<body>
<h2>Пример селектора :invalid</h2>
<form>
<input type="email" value="E-mail">
</form>
</body>
</html>Поддержка браузера
|
|
|
|
|
|---|---|---|---|---|
| 10.0+ | 12.0+ | 4.0+ | 10.1+ | 10.0+ |
Практикуйте свои знания
Какой из следующих вариантов использования CSS псевдокласса :invalid является верным?
Правильный!
Неправильно!