`:required`

Стилизуем поля формы, обязательные для заполнения.

Время чтения: меньше 5 мин

Кратко

Скопировано

Псевдокласс :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>
          <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 {  border-width: 2px;  border-color: #FF8630;  background-color: rgb(255 134 48 / 0.1);}
          input:required {
  border-width: 2px;
  border-color: #FF8630;
  background-color: rgb(255 134 48 / 0.1);
}

Открыть демо в новой вкладке

Как понять

Скопировано

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

На практике

Скопировано

Денис Ежков советует

Скопировано

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

        
          
          <form>  <div class="form-row">    <label class="label-required" 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>
          <form>
  <div class="form-row">
    <label class="label-required" 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>

        
          
          .label-required::after {  content: "*";  font-size: 0.7em;}.hint {  color: #FFFFFF;}input:required + .hint {  color: #2E9AFF;}
          .label-required::after {
  content: "*";
  font-size: 0.7em;
}

.hint {
  color: #FFFFFF;
}

input:required + .hint {
  color: #2E9AFF;
}

Открыть демо в новой вкладке

Кратко

Пример

Как понять

На практике

Денис Ежков советует

Читайте также

<select>

<textarea>

Селектор по атрибуту

`<select>`

`<textarea>`