/ ↲
    Расширенный поиск

    CSS

    :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;
}
    Открыть демо в новой вкладке

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