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

1

Від автора: якщо ви читаєте цю статтю, то ви знаєте, скільки болю викликає кастомний стилізація чекбоксов і радіокнопок. Якщо залишити стилі за замовчуванням, то вони будуть по-різному виглядати в різних браузерах. Подібну проблему можна вирішити різними способами: за допомогою вендорних префіксів, фонових зображень, символів юнікоду та шрифтів-іконок. Але у більшості способів є свої проблеми, або вони неоднаково реалізуються в браузерах. Крім того, тільки кілька рішень піклуються про доступність.

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

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

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

суміжний селектор +

Представлена трійка добре підтримується майже у всіх браузерах (IE 10 і вище).

У цій статті я продемонструю спосіб на чекбоксах. З радіокнопками підхід такий же, тільки трохи відрізняються стилі.

Розмітка

Pure CSS Checkbox

Теги input і label інкапсулюються в контейнер .checkbox, щоб було зрозуміло, що цей код являє собою чекбокс.

Щоб чекбокс заробив, нам потрібно:

label повинен бути після ;

потрібний атрибут id;

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

Крок 3 буде пояснено, навіщо це потрібно.

Крок 1: ховаємо стандартний чекбокс без втрати доступності

До стандартного чекбоксу ми не можемо застосувати стилі, тому ми ховаємо. Тег можна заховати різними способами:

використовувати display: none;

використовувати visibility: hidden;

використовувати opacity: 0;

винести його за межі екрану з допомогою position: absolute і занадто великого значення, наприклад, left: -9999px

За цими методами є чудова стаття. Перші два методи ми використовувати не будемо, тому що тоді скринридеры не зможуть читати стандартні чекбокси. Мені подобається третій спосіб, тому що в нашому випадку нам необов’язково зрушувати чекбокс за межі екрану. Він може стати невидимим і на своєму місці.

Важливе зауваження: приховані поля 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 тегу і атрибут for тегу label. Тепер ми можемо перемикати стану стандартного чекбокса кліками по label. Ми спеціально розмістили label після , щоб використовувати стан :checked тега для стилізації псевдоэлемента ::after (галки) поля label з допомогою суміжного селектора +, як показано нижче:

/*Ховаємо галку за замовчуванням*/
.checkbox input[type=»checkbox»] + label::after {
content: none;
}
/*Показуємо галку станом checked*/
.checkbox input[type=»checkbox»]:checked + label::after {
content: «»;
}

Показуємо/ховаємо галку станом :checked стандартного чекбокса

Ми отримали функціональний чекбокс, але він поки що недоступний.

Крок 4: додаємо в стилі псевдоклас focus, щоб зробити доступним чекбокс

З допомогою селектора :focus можна використовувати суміжний селектор +, щоб надати псевдоэлементу ::before (зовнішній блок) поля label фокус. Люблю писати стилі, як Google Chrome, тому що користувачі з ними знайомі.

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

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

Спробуйте включити чекбокс в демо вище з допомогою клавіатури.

От і все! Повністю доступний, настроюється і функціональний чекбокс в чотири простих кроки.

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