Руководство по CSS

CSS @правила (RULES)

Полный список CSS свойств

Функции CSS Полное руководство по селекторам CSS

CSS :invalid селекторы

:invalid CSS сурожный класс означает любое содержимое, не прошедшее проверку, <input> или другие <form> элементы .

　Полное руководство по CSS-селекторам

Онлайн пример

Если значение элемента input非法, установите стиль в синий цвет:

Пример

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>Основной учебник (oldtoolbag.com)</title>　
<style>
input:invalid
{
　　　　border:2px solid blue;
}
</style>
</head>
<body>
<h3>Пример :invalid селектора.</h3>
<input type="email" value="supportEmail" />
<p>Введите законный адрес e-mail, чтобы увидеть изменения в стиле.</p>
</body>
</html>

Проверьте, как это работает <‹/›

Определение и использование

:invalid селекторы используются для установки стиля, когда значение элемента формы является非法ным.

Внимание: 　:invalid селекторы применяются только к элементам, для которых можно определить интервал значений, например, к элементам input с атрибутами min и max, а также к правильным email-поле, законным числовым полям и т.д.

Совместимость браузеров

Числа в таблице показывают первую версию браузера, поддерживающую этот атрибут.

Выборщик
:invalid	10.0	10.0	4.0	5.0	10.0

Синтаксис CSS

/* можно выбрать любое невалидное <input> */
input:invalid {
　　background-color: розовый;
}

Этот псевдокласс очень полезен для подчеркивания ошибок полей пользователей.

Связанные страницы

CSS селекторы :valid

　Полное руководство по CSS-селекторам

Функции CSS Полное руководство по селекторам CSS