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

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

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

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

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

Разметка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Часть 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);
}

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

Часть 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;
}

Позиционирование поддельного чекбокса относительно 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: "";
}

Показываем/прячем галку по состоянию :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;
}

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

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

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

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

Автор: Aditya Bhandari

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика верстки сайта под мобильные устройства

Изучите курс по созданию адаптивных сайтов

Научиться

Комментарии Вконтакте: