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

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееПредставленная тройка хорошо поддерживается почти во всех браузерах (IE 10 и выше).
В этой статье я продемонстрирую способ на чекбоксах. С радиокнопками подход такой же, только немного отличаются стили.
Разметка
1 2 3 4 |
<div class="checkbox"> <input type="checkbox" id="checkbox_1"> <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:
1 2 3 |
.checkbox input[type="checkbox"] { opacity: 0; } |
После первого шага мы увидим следующее:
Прячем стандартный чекбокс, оставляя его доступным
Шаг 2: создаем поддельный чекбокс из псевдоэлементов
Поддельный чекбокс можно создать с помощью псевдоэлементов ::before и ::after. Для внешнего блока мы возьмем ::before, а для галки ::after. Эти элементы мы поместим перед текстом в label.
Я разделил этот шаг на три части.
Часть 1: создание внешнего блока
Зададим псевдоэлементу ::before отображение inline-block, а также пропишем height и width. Для видимости добавим border. Вместо рамки можете добавить свои стили.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
1 2 3 4 5 6 7 8 9 |
.checkbox label::before{ content: ""; display: inline-block; height: 16px; width: 16px; border: 1px solid; } |
Замечание: content: «» нужен, чтобы псевдоэлемент стал видимым. Если свойство content не задано, псевдоэлемент не отрисовывается.
Стили внешнего блока поддельного чекбокса
Часть 2: создание галки
Зададим псевдоэлементу ::after отображение inline-block, а также пропишем height и width. Также добавим стили для левой и нижней рамки и повернем все это на 45 градусов, чтобы было похоже на галку.
1 2 3 4 5 6 7 8 9 10 |
.checkbox label::after { content: ""; display: inline-block; height: 6px; width: 9px; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); } |
Создание галки для поддельного чекбокса
Часть 3: позиционирование внешнего блока и галки
Для позиционирования обоих псевдоэлементов относительно текста в label воспользуемся абсолютным позиционированием.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.checkbox label { position: relative; } .checkbox label::before, .checkbox label::after { position: absolute; } /*Внешний блок*/ .checkbox label::before { top: 3px; } /*Галка*/ .checkbox label::after { left: 4px; top: 7px; } |
Позиционирование поддельного чекбокса относительно label
Шаг 3: показываем и прячем галку по состоянию чекбокса
Мы присвоили атрибут id тегу <input type=»checkbox»> и атрибут for тегу label. Теперь мы можем переключать состояния стандартного чекбокса кликами по label. Мы специально разместили label после <input type=»checkbox»>, чтобы использовать состояние :checked тега <input type=»checkbox»> для стилизации псевдоэлемента ::after (галки) поля label с помощью смежного селектора +, как показано ниже:
1 2 3 4 5 6 7 8 |
/*Прячем галку по умолчанию*/ .checkbox input[type="checkbox"] + label::after { content: none; } /*Показываем галку по состоянию checked*/ .checkbox input[type="checkbox"]:checked + label::after { content: ""; } |
Показываем/прячем галку по состоянию :checked стандартного чекбокса
Мы получили функциональный чекбокс, но он пока что недоступен.
Шаг 4: добавляем в стили псевдокласс focus, чтобы сделать чекбокс доступным
С помощью селектора :focus на <input type=»checkbox»> можно использовать смежный селектор +, чтобы придать псевдоэлементу ::before (внешний блок) поля label фокус. Люблю писать стили, как в Google Chrome, потому что пользователи с ними знакомы.
1 2 3 4 |
/*Добавляем фокус к внешнему блоку поддельного чекбокса*/ .checkbox input[type="checkbox"]:focus + label::before { outline: rgb(59, 153, 252) auto 5px; } |
Стили фокуса для доступности
Попробуйте включить чекбокс в демо выше с помощью клавиатуры.
Вот и все! Полностью доступный, настраиваемый и функциональный чекбокс в четыре простых шага.
Не забудьте посмотреть чекбоксы и радиокнопки на чистом CSS в проекте Project Clarity. Не стесняйтесь, пишите свои мысли в комментариях!
Автор: Aditya Bhandari
Источник: //medium.com/
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее