skip to main content

:required

css

Кратко 🔗

Псевдокласс :required, дополняющий основной селектор, поможет выбрать элементы <input>, <textarea> или <select>, у которых задан атрибут required.

Пример 🔗

<form>
<div class="form-row">
<label for="first_name">Имя*</label>
<input type="text" id="first_name" required>
</div>
<div class="form-row">
<label for="last_name">Фамилия</label>
<input type="text" id="last_name">
</div>
</form>
input:required {
outline: 2px solid blue;
}

Обязательное для заполнения поле ввода будет иметь синюю обводку.

See the Pen :required by Denis Ezhkov (@ezhkov) on CodePen.

Как это понять 🔗

Если нужно как-то выделить обязательные для заполнения элементы форм можно использовать в селекторе псевдокласс :required.

В работе 🔗

💡 Как правило, в реальных формах обязательные к заполнению поля выделяют не так явно, как в примерах выше. Обычно после текстового описания обязательного поля ставят звёздочку. В примере ниже, кроме того, показано, как можно стилизовать подсказку к полю.

<form>
<div class="form-row">
<label for="first_name">Имя*</label>
<input type="text" id="first_name" required>
<span class="hint">Обязательно к заполнению</span>
</div>
<div class="form-row">
<label for="last_name">Фамилия</label>
<input type="text" id="last_name">
<span class="hint">Необязательно</span>
</div>
</form>
.hint {
color: #555555;
}

input:required + .hint {
color: lightcoral;
}

See the Pen :required by Denis Ezhkov (@ezhkov) on CodePen.

Автор: Денис,