CSS :required — обов'язкове поле форми

CSS-селектор :required обирає поля форми з атрибутом required — ті, без яких форма не відправиться.

правити

Загальний опис

правити

Порада

Використовуйте селектор :optional для вибірки елементів форми, що не обов'язкові до заповнення.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

:required {


    css declarations;


}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	10	4	5	10	12	10

Підтримка: мобільні переглядачі

Переглядач
	4.4.3	18	4	5

Приклади

+ запропонувати свій приклад у пісочниці

<form class="req">
    <p><input id="a" required placeholder="обов'язкове"> <label for="a">Пошта</label></p>
    <p><input id="b" placeholder="за бажанням"> <label for="b">Телефон</label></p>
</form>

.req {
    font: 15px system-ui, sans-serif;
}

.req input {
    padding: .45rem .6rem;
    border: 1px solid #94a3b8;
    border-radius: 6px;
}

.req input:required + label::after {
    content: " *";
    color: #dc2626;
    font-weight: 700;
}

.req input:required {
    border-left: 3px solid #dc2626;
}

<form>
    <input type="text" required placeholder="обов'язкове — жовте">
    <input type="text" placeholder="необов'язкове">
</form>

input:required {
    background-color: yellow;
}