Создание доступных чекбоксов и радиокнопок на чистом CSS

Дата публикации: 2017-02-17

От автора: если вы читаете эту статью, то вы знаете, сколько боли вызывает кастомная стилизация чекбоксов и радиокнопок. Если оставить стили по умолчанию, то они будут по-разному смотреться в разных браузерах. Подобную проблему можно решить разными способами: с помощью вендорных префиксов, фоновых изображений, символов юникода и шрифтов-иконок. Но у большинства способов есть свои проблемы, или они неодинаково реализуются в браузерах. Кроме того, только несколько решений заботятся о доступности.

Ни один из вышеперечисленных методов не дает мне то, чего я хочу. Я нашел простой способ, который очень просто обслуживать, и который не идет на компромиссы. Приступим! Нам понадобится:

псевдоэлементы ::before и ::after

CSS псевдокласс :checked

смежный селектор +

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Представленная тройка хорошо поддерживается почти во всех браузерах (IE 10 и выше).

В этой статье я продемонстрирую способ на чекбоксах. С радиокнопками подход такой же, только немного отличаются стили.

Разметка

<div class="checkbox">
 <input type="checkbox" id="checkbox_1">
 <label for="checkbox_1">Pure CSS Checkbox</label>
</div>

<label for="checkbox_1">Pure CSS Checkbox</label>

</div>

Теги input и label инкапсулируются в контейнер .checkbox, чтобы было понятно, что этот код представляет собой чекбокс.

Чтобы чекбокс заработал, нам нужно:

label должен быть после <input type=»checkbox»>;

<input type=»checkbox»> нужен атрибут id;

label необходимо указать атрибут for.

В шаге 3 будет объяснено, зачем это нужно.

Шаг 1: прячем стандартный чекбокс без потери доступности

К стандартному чекбоксу мы не можем применить стили, поэтому мы его прячем. Тег <input type=»checkbox»> можно спрятать разными способами:

использовать display: none;

использовать visibility: hidden;

использовать opacity: 0;

вынести его за границы экрана с помощью position: absolute и слишком большого значения, например, left: -9999px

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

Важное замечание: скрытые поля input остаются доступными, но для упрощения обнаружения необходимо добавить в стили :focus. Мы это сделаем в шаге 4.

Спрячем стандартный чекбокс с помощью opacity: 0:

.checkbox input[type="checkbox"] {
 opacity: 0;
}

.checkbox input[type="checkbox"] {

opacity: 0;

}

После первого шага мы увидим следующее:

See the Pen <a href='http://codepen.io/takeradi/pen/rjJppd/'>Pure CSS Checkbox: Part 1</a> by Aditya Bhandari (<a href='http://codepen.io/takeradi'>@takeradi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

Прячем стандартный чекбокс, оставляя его доступным

Шаг 2: создаем поддельный чекбокс из псевдоэлементов

Поддельный чекбокс можно создать с помощью псевдоэлементов ::before и ::after. Для внешнего блока мы возьмем ::before, а для галки ::after. Эти элементы мы поместим перед текстом в label.

Я разделил этот шаг на три части.

Часть 1: создание внешнего блока

Зададим псевдоэлементу ::before отображение inline-block, а также пропишем height и width. Для видимости добавим border. Вместо рамки можете добавить свои стили.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

.checkbox label::before{
 content: "";
 display: inline-block;
 
 height: 16px;
 width: 16px;
 
 border: 1px solid; 
}

.checkbox label::before{

content: "";

display: inline-block;

height: 16px;

width: 16px;

border: 1px solid;

}

Замечание: content: «» нужен, чтобы псевдоэлемент стал видимым. Если свойство content не задано, псевдоэлемент не отрисовывается.

See the Pen <a href='http://codepen.io/takeradi/pen/ZLrvrr/'>Pure CSS Checkbox: Part 2.1</a> by Aditya Bhandari (<a href='http://codepen.io/takeradi'>@takeradi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

Стили внешнего блока поддельного чекбокса

Часть 2: создание галки

Зададим псевдоэлементу ::after отображение inline-block, а также пропишем height и width. Также добавим стили для левой и нижней рамки и повернем все это на 45 градусов, чтобы было похоже на галку.

.checkbox label::after {
 content: "";
 display: inline-block;
 height: 6px;
 width: 9px;
 border-left: 2px solid;
 border-bottom: 2px solid;
 
 transform: rotate(-45deg);
}

.checkbox label::after {

content: "";

display: inline-block;

height: 6px;

width: 9px;

border-left: 2px solid;

border-bottom: 2px solid;

transform: rotate(-45deg);

}

See the Pen <a href='http://codepen.io/takeradi/pen/zNRpWL/'>Pure CSS Checkbox: Part 2.2</a> by Aditya Bhandari (<a href='http://codepen.io/takeradi'>@takeradi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

Создание галки для поддельного чекбокса

Часть 3: позиционирование внешнего блока и галки

Для позиционирования обоих псевдоэлементов относительно текста в label воспользуемся абсолютным позиционированием.

.checkbox label {
 position: relative;
}
.checkbox label::before,
.checkbox label::after {
 position: absolute;
}
/*Внешний блок*/
.checkbox label::before {
 top: 3px;
}
/*Галка*/
.checkbox label::after {
 left: 4px;
 top: 7px;
}

.checkbox label {

position: relative;

}

.checkbox label::before,

.checkbox label::after {

position: absolute;

}

/*Внешний блок*/

.checkbox label::before {

top: 3px;

}

/*Галка*/

.checkbox label::after {

left: 4px;

top: 7px;

}

See the Pen <a href='http://codepen.io/takeradi/pen/GrQydJ/'>Pure CSS Checkbox: Part 2.3</a> by Aditya Bhandari (<a href='http://codepen.io/takeradi'>@takeradi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

Позиционирование поддельного чекбокса относительно label

Шаг 3: показываем и прячем галку по состоянию чекбокса

Мы присвоили атрибут id тегу <input type=»checkbox»> и атрибут for тегу label. Теперь мы можем переключать состояния стандартного чекбокса кликами по label. Мы специально разместили label после <input type=»checkbox»>, чтобы использовать состояние :checked тега <input type=»checkbox»> для стилизации псевдоэлемента ::after (галки) поля label с помощью смежного селектора +, как показано ниже:

/*Прячем галку по умолчанию*/
.checkbox input[type="checkbox"] + label::after {
 content: none;
}
/*Показываем галку по состоянию checked*/
.checkbox input[type="checkbox"]:checked + label::after {
 content: "";
}

/*Прячем галку по умолчанию*/

.checkbox input[type="checkbox"] + label::after {

content: none;

}

/*Показываем галку по состоянию checked*/

.checkbox input[type="checkbox"]:checked + label::after {

content: "";

}

See the Pen <a href='http://codepen.io/takeradi/pen/EZQoLe/'>Pure CSS Checkbox: Part 3</a> by Aditya Bhandari (<a href='http://codepen.io/takeradi'>@takeradi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

Показываем/прячем галку по состоянию :checked стандартного чекбокса

Мы получили функциональный чекбокс, но он пока что недоступен.

Шаг 4: добавляем в стили псевдокласс focus, чтобы сделать чекбокс доступным

С помощью селектора :focus на <input type=»checkbox»> можно использовать смежный селектор +, чтобы придать псевдоэлементу ::before (внешний блок) поля label фокус. Люблю писать стили, как в Google Chrome, потому что пользователи с ними знакомы.

/*Добавляем фокус к внешнему блоку поддельного чекбокса*/
.checkbox input[type="checkbox"]:focus + label::before {
 outline: rgb(59, 153, 252) auto 5px;
}

/*Добавляем фокус к внешнему блоку поддельного чекбокса*/

.checkbox input[type="checkbox"]:focus + label::before {

outline: rgb(59, 153, 252) auto 5px;

}

See the Pen <a href='http://codepen.io/takeradi/pen/rjJpKK/'>Pure CSS Checkbox: Part 4</a> by Aditya Bhandari (<a href='http://codepen.io/takeradi'>@takeradi</a>) on <a href='http://codepen.io'>CodePen</a>.<br />

Стили фокуса для доступности

Попробуйте включить чекбокс в демо выше с помощью клавиатуры.

Вот и все! Полностью доступный, настраиваемый и функциональный чекбокс в четыре простых шага.

Не забудьте посмотреть чекбоксы и радиокнопки на чистом CSS в проекте Project Clarity. Не стесняйтесь, пишите свои мысли в комментариях!

Автор: Aditya Bhandari

Источник: https://medium.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее