CSS :invalid — поле, заповнене неправильно
Селектор :invalid обирає елементи форми, значення яких не відповідає налаштуванням елемента. Тобто, якщо значення числового поля (type="number") введено як рядок чи type="email" не відповідає правильній електронній пошті.
Порада: Використовуйте селектор :valid для вибірки елементів форми зі значенням, яке відповідає заданим фільтрам елемента.
Загальний опис
автор: NagarD
Синтаксис
:invalid {
css declarations;
}Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 10 | 4 | 5 | 10 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 18 | 4 | 5 |
Приклади
+ запропонувати свій приклад у пісочниці
Перше поле містить не адресу — воно невалідне, і рамка червона. Виправ текст на адресу (або зіпсуй друге поле) — стилі перемкнуться самі.
HTML
<p>Поля вимагають електронну адресу:</p>
<input type="email" value="не-адреса">
<input type="email" value="[email protected]">CSS
input:invalid {
border: 2px solid red;
}Перше поле червоніє одразу, друге — лише після того, як ви в ньому щось напишете й підете далі.
HTML
<form class="f">
<label>:invalid одразу <input type="email" required placeholder="напишіть щось не схоже на пошту"></label>
<label>:user-invalid після введення <input class="polite" type="email" required placeholder="те саме, але ввічливо"></label>
</form>CSS
.f {
display: grid;
gap: .8rem;
max-width: 24rem;
font: 15px system-ui, sans-serif;
}
.f input {
display: block;
width: 100%;
padding: .5rem;
border: 1px solid #94a3b8;
border-radius: 6px;
}
/* спрацьовує ще до введення */
.f input:invalid {
border-color: #dc2626;
background: #fef2f2;
}
/* лише після взаємодії */
.f input.polite:invalid {
border-color: #94a3b8;
background: #fff;
}
.f input.polite:user-invalid {
border-color: #dc2626;
background: #fef2f2;
}Коментарі
Коментарів ще немає — будьте першим!