Управление формой с помощью CSS-свойства currentColor и псевдо-элементов

Все это возможно благодаря тому, что CSS -свойство currentColor и псевдо-элементы хорошо работают в паре.

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

Управление формой при помощи CSS-свойства currentColor и псевдо-элементов Я подумал, что можно создать собственные контроллеры для формы с помощью псевдо-элементов и currentColor. И решил оформить радиокнопки и чекбоксы.

Посмотреть просмотр

Разметка

Разметка радиокнопок и чекбоксов содержит Label, в который оборачивается элемент ввода и нужный текст. Как вы наверняка знаете, при вкладывании элементов управления html друг в друга улучшается их юзабилити, и вам не придется использовать id:

<label class="form-group"> <input type="checkbox"> <span class="form-control checkbox"> Orange </span></label>

Разметка радиокнопки выглядит следующим образом.

Стили

Далее я постараюсь объяснить практически каждое правило CSS, которое используется в этом примере.

Общие стили

Свойство box-sizing: border-box будет одним из самых простых методов реализации:

: *,*:before,*:after { box-sizing: border-box;}

К Label, который оборачивает чекбокс, радиокнопку и текст, применяется .form-group. В этом стиле используется указатель, поскольку он дополняет юзабилити нашего элемента, сообщая посетителю, что к данному элементу можно применить действие. user-select: none; не будет стандартным свойством CSS, и его действие в будущем может измениться.

На данный момент, это эффективный метод запретить выделение текста с помощью CSS:

.form-group { cursor: pointer; line-height: 1; user-select: none; }

В данном случае, мы изменяем радиокнопки и чекбоксы с помощью псевдо-элементов, так что «родные» элементы управления формы нам необходимо скрыть. Далее представлен наиболее подходящий метод сделать это, поскольку здесь не используются display: none или visibility: hidden, которые обычно отрицательно сказываются на удобстве всего интерфейса:

.form-group > [type="checkbox"],.form-group > [type="radio"] { position: absolute; overflow: hidden; clip: rect(0 0 0 0);  height: 1px; width: 1px;   margin: -1px; padding: 0; border: 0; }

Сейчас переходим к CSS -правилам, которые подготавливают «почву» к последующим действиям. У .form-control выставлено относительное позиционирование, поскольку его псевдо-элементы будут иметь абсолютное позиционирование.

Я думаю, вы обратили внимание на единицы измерения em. Их использование может контроллерам формы изменяться в размерах в зависимости от выбранного значения font-size:

Управление формой при помощи CSS-свойства currentColor и псевдо-элементов
.form-control {  display: inline-block;  position: relative;  padding-left: 1.3em;}.form-control::before,.form-control::after {  content: '';  position: absolute;  left: 0;}.form-control::before {  width: 1em;  height: 1em;  border:.1em solid;}.form-control::after {  top:.1em; left:.1em;  width:.8em; height:.8em;}

Чекбокс

Здесь основной трюк заключается в использовании мнемоника(сущности) HTML check, в юникоде представленного под номером U+2714. Для чекбоксов, и радиокнопок мы будем использовать родственные селекторы, чтобы приобрести функционал переключения.

Все остальное будет реализовано с помощью CSS:

.form-control.checkbox::before {  border-radius:.1em;}.form-control.checkbox::after {    text-align: center;            content: "2714";  line-height:.8em;                     opacity: 0;  transform: scale(.5);  transition: transform .1s ease;}.form-group > .form-control.checkbox:hover::after {  opacity: .4;}.form-group > input:checked + .form-control.checkbox::after {  opacity: 1;  transform: scale(1);       }

Радиокнопка

Для радиокнопки формы, мы используем свойство border , которое сможет нам добиться желаемого эффекта. Также добавим border-radius , чтобы приобрести закругленные углы, и background-clip , чтобы исключить выход фона за пределы границы.

В этом примере главным свойством будет currentColor , в котором отражено высчитанное значение цвета элемента. Позже мы будем использовать JavaScript для случайного вывода цветов, чтобы посмотреть, как изменяются цвета элементов управления формы:

.form-control.radio::before,.form-control.radio::after {  border-radius: 50%;}.form-control.radio::after {  background-color: currentColor;  background-clip: padding-box;  border: .2em solid transparent;  opacity: 0;  transition: border .1s ease;}.form-group >.form-control.radio:hover::after {  opacity: .4;          }            .form-group > input:checked + .form-control.radio::after {  border-width: .1em;  opacity: 1;         }

Небольшой JS-сниппет

Ради эксперимента я решил использовать PleaseJS – JavaScript-библиотеку для случайного вывода цветов. Только не забудьте пару раз подряд обновить страницу с просмотр , чтобы увидеть эффект:

var formControl       = document.querySelectorAll('.form-group'),    formControlLength = formControl.length,    pleaseColor       = Please.make_color({      colors_returned: formControlLength,      saturation: 1,      value: .9    });for (var i = 0; i < formControlLength; i++) {  formControl[i].style.color = pleaseColor[i];};

Поддержка браузерами

Этот пример не будет работать в устаревших браузерах ниже IE8 . С другой стороны, эффект хорошо работает в современных браузерах и смартфонах. Также хотелось бы узнать мнение относительно данной статьи.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *