:invalid
Псевдокласс :invalid CSS псевдокласса представляет любой элемент <form>, <fieldset>, <input> или другой элемент <form>, содержимое которого не проходит валидацию.
Попробуйте
Этот псевдокласс полезен для выделения ошибок ввода для пользователя.
Синтаксис
:invalid {
/* ... */
}
Доступность
Красный цвет обычно используется для обозначения недопустимого ввода. Люди с определёнными типами цветовой слепоты не смогут определить состояние ввода, если оно не сопровождается дополнительным индикатором, не опирающимся на цвет для передачи значения. Обычно используются описательный текст и/или значок.
Примеры
Окрашивание элементов для отображения валидации
HTML
<form>
<div class="field">
<label for="url_input">Enter a URL:</label>
<input type="url" id="url_input" />
</div>
<div class="field">
<label for="email_input">Enter an email address:</label>
<input type="email" id="email_input" required />
</div>
</form>
CSS
label {
display: block;
margin: 1px;
padding: 1px;
}
.field {
margin: 1px;
padding: 1px;
}
input:invalid {
background-color: #ffdddd;
}
form:invalid {
border: 5px solid #ffdddd;
}
input:valid {
background-color: #ddffdd;
}
form:valid {
border: 5px solid #ddffdd;
}
input:required {
border-color: #800000;
border-width: 3px;
}
input:required:invalid {
border-color: #c00000;
}
Результат
Отображение разделов поэтапно
В этом примере мы используем :invalid вместе с ~, комбинатор последующего сиблинга, чтобы отобразить форму поэтапно, так что форма первоначально показывает первый элемент для заполнения, а когда пользователь заполняет каждый элемент, форма отображает следующий. Когда вся форма заполнена, пользователь может её отправить.
HTML
<form>
<fieldset>
<label for="form-name">Name</label><br />
<input type="text" name="name" id="form-name" required />
</fieldset>
<fieldset>
<label for="form-email">Email Address</label><br />
<input type="email" name="email" id="form-email" required />
</fieldset>
<fieldset>
<label for="form-message">Message</label><br />
<textarea name="message" id="form-message" required></textarea>
</fieldset>
<button type="submit" name="send">Submit</button>
</form>
CSS
/* Hide the fieldset after an invalid fieldset */
fieldset:invalid ~ fieldset {
display: none;
}
/* Dim and disable the button while the form is invalid */
form:invalid button {
opacity: 0.3;
pointer-events: none;
}
input,
textarea {
box-sizing: border-box;
width: 100%;
font-family: monospace;
padding: 0.25em 0.5em;
}
button {
width: 100%;
border: thin solid darkgrey;
font-size: 1.25em;
background-color: darkgrey;
color: white;
}
Результат
Примечания
Радиокнопки
Если любая из радиокнопок в группе required, псевдокласс :invalid применяется ко всем им, если ни одна из кнопок в группе не выбрана. (Группированные радиокнопки используют одно и то же значение для атрибута name.)
Значения по умолчанию Gecko
По умолчанию Gecko не применяет стиль к псевдоклассу :invalid. Однако он применяет стиль (красное «свечение» с использованием свойства box-shadow) к псевдоклассу :user-invalid, который применяется в подмножестве случаев для :invalid.
Спецификации
Совместимость браузеров
| Рабочий стол | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | WebView Android | |
:invalid |
10 | 12 | 4 | 10 | 5 | 18 | 4 | 10.1 | 5 | 1.0 | 37 |
form |
40 | 79 | 13 | 27 | 9 | 40 | 14 | 27 | 9 | 4.0 | 40 |
См. также
- Другие псевдоклассы, связанные с валидацией:
:required,:optional,:valid - Связанные псевдоклассы Mozilla:
:user-invalid,:-moz-submit-invalid - Валидация данных формы
- Доступ к состоянию валидности из JavaScript
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid
