Abr@X@bra.ru
Расширенный CSS для элементов форм
Расширенный CSS для элементов форм

Расширенный CSS для элементов форм

07.11.2017
69

Стилизовать формы с помощью CSS всегда то еще занятие, но есть ряд малоиспользуемых селекторов, которые дают нам значительную силу. Некоторые из них относительно новые, в то время как другие были доступны в течение довольно долгого времени.

Формы всегда были с трудом поддаются стилю с помощью CSS, но есть несколько малоиспользуемых селекторов, которые дают нам значительную силу для ввода стилей и окружающих элементов. Некоторые из них относительно новы, в то время как другие были доступны в течение довольно долгого времени.

Посмотрите демо-версию здесь.

:placeholder-shown


Первый селектор относительно нов и еще не имеет полной поддержки браузера. Однако это похоже на то, что может легко работать как прогрессивное улучшение. Селектор позволяет нам определить, заполнено ли поле ввода или нет. Это может пригодиться, если мы хотим динамически скрыть и показать соответствующий labe для ввода.

Здесь я скрываю lable до тех пор, пока пользователь не введет текст. Плюс использую эффект для отображения иконки.

    <form action="" class="form1">
       <div class="form-group">
          <input type="text" id="dynamic-label-input" required placeholder="Введите текст">
          <label for="dynamic-label-input">Продолжайте)</label>
       </div>
    </form>

.form-group {
    position: relative;
    padding-top: 1.5rem;
}

label {
    position: absolute;
    top: 0;
    font-size: var(--font-size-small);
    opacity: 1;
    transform: translateY(0);
    transition: all 0.2s ease-out;
}

input:placeholder-shown + label {
    opacity: 0;
    transform: translateY(1rem);
}

:required



Required указывает, что данное поле, обязательное для заполнения. Здесь я использую пустой span с классом .help-text и динамически размещаю контент, используя псевдоэлемент :: before.

<form action="">
      <input type="text" id="required-input" required>
      <span class="help-text"></span>
</form>

input:required + .help-text::before {
  content: '*Я обязательное поле';
}

:optional


Этот селектор работает ровно наоборот чем :required. Я снова использую пустой span с классом .help-text для отображения необязательного текста, если required НЕ присутствует.

input:optional + .help-text::before { 
  content: '*Если нет required';
}

:disabled


Полностью отключает какое либо взаимодействие с полем и делает его недоступным для пользователя.

<form action="">
      <input type="text" id="disabled-input" value="Ушел на обед" disabled="">
</form>

input:disabled {
  border-color: #000;
  background-color: #6862626c;
  cursor: no-drop;
}

:read-only



Атрибут readonly имеет несколько иное значение, чем disabled.

<form action="">
      <label for="read-only-input">Доступно только для чтения</label>
      <input type="text" id="read-only-input" value="чтение" readonly>
</form>

:valid

HTML5 позволяет делать валидацию полей без JS. В данном примере делаем проверку на корректный email адрес. Безусловно, что с помощью JS валидацию можно настроить гораздо гибче. Но порой задачи стоят не настолько тривиальны, что достаточно и такого способа.

<form action="">
      <label for="valid-email">Валидная почта</label>
      <input type="email" id="valid-email" value="admin@abraxabra.ru" required="">
      <span class="help-text"></span>
</form>

input[type='email']:valid + .help-text::before {
  content: 'E-mail адрес валиден'
}

:invalid




Данный  селектор, сработает если e-mail записан неверно.

<form action="">
      <label for="invalid-email">Не валидная почта</label>
      <input type="email" id="invalid-email" value="notanemail" required="">
      <span class="help-text"></span>
</form>

input[type='email']:invalid + .help-text::before {
  content: 'E-mail адрес не валиден'
}

Я также могу отображать динамические сообщения валидации для каждого типа ввода, используя класс .help-text и псевдо-элемент :: before.

:in-range/:out-of-range



Эти селекторы определяют, указано ли число в пределах заданных значений min / max или нет.

<form action="">
      <label for="in-range-input">Число от 1 до 10</label>
      <input type="number" id="in-range-input" min="1" max="10" value="8" required="">
 </form>

:checked



Большинство из вас будут знакомы с этим селектором. В данном примере применяю специальные стили к флажкам и переключателям при проверке.

<form action="">
      <div class="checkbox">
        <input type="checkbox" name="checkbox" id="check-option-1" value="1" checked="">
        <label for="check-option-1">
          <span class="checkbox-l">Один</span>
        </label>
      </div>
      <div class="checkbox">
        <input type="checkbox" name="checkbox" id="check-option-2" value="2">
        <label for="check-option-2">
          <span class="checkbox-l">Два</span>
        </label>
      </div>
</form>


.checkbox {
  position: relative;
}

.checkbox label::before {
  display: block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 24px;
  height: 24px;
  background-color: hsl(0, 0%, 90%);
  background-color: blue;
  transition: background-color 0.1s ease-out;
  content: '';
}

.checkbox label {
  position: absolute;
  top: 20px;
}

.checkbox-l {
  position: absolute;
  width: 100%;
  left: 30px;
  top: 10px;
}

.checkbox input[type='checkbox']:checked + label::after {
  display: block;
  position: absolute;
  top: 5px;
  left: 8px;
  width: 8px;
  height: 14px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  content: '';
}





CSS, FORM
Читайте также:
Использование SVG на вашем сайте

Использование SVG на вашем сайте

Поддержка масштабируемой векторной графики (SVG) превосходна работает во всех современных браузерах, формат изоб...
Читать
Изменяем CSS переменные через JS

Изменяем CSS переменные через JS

SASS-переменные с нами уже давно. Они позволяют задать переменную один раз во время выполнения (runtime) и использовать ...
Читать
Визуализация данных на JS

Визуализация данных на JS

D3 (Data-Driven Documents — Управление данными в документах [досл.]). Она позволяет «оживить» ваш проект, используя...
Читать