Стилизация переключателей (радио-кнопок) в CSS

Радио-кнопки подразумевают, что вы выбираете один элемент из некоторого количества, поэтому элемент <input type="radio"> получил название переключателя в отличие от флажков, которые подразумевают множественный выбор. Браузеры довольно неплохо отображают радиокнопки по умолчанию.

Однако, вам может понадобится как-то стилизовать эти элементы для своего сайта.

Как правило, стилизация радио-кнопок основана на использовании такого элемента, как label, клик на котором приводит к выбору определенного переключателя, с которым <label> связан с помощью атрибута for, в котором указывается id переключателя. Второй вариант - это когда в разметке радио-переключатель находится внутри элемента label.

Простой пример

See the Pen CSS Radio Buttons by Tristan White (@triss90) on CodePen.18892

Радио-кнопки, похожие на флажки

Если вы хотите стилизовать переключатели в виде флажков - пример от Andrew Vereshchak - как раз то, что нужно.

See the Pen Toggle radio intput with the label by Andrew Vereshchak (@multum) on CodePen.18892

Переключатели с изменением цвета и иконки

Здесь автор Andrew использовал абсолютное позиционирование для отдельного блока с классом .switch, в который входят 2 <label> и <span>. Также здесь не обошлось без псевдоэлемента ::after и псевдокласса :checked.

See the Pen Awesome Toggle Button by Andrew (@theawesomecoder61) on CodePen.18892

Разноцветные радио-кнопки

В этом примере от Dronca Raul каждый переключатель имеет свой цвет и галочку внутри при щелчке на элементе.

See the Pen Custom Radio Buttons by Dronca Raul (@rauldronca) on CodePen.18892

Используем переключатели для выбора цвета

В этом примере тема цветов для переключателей продолжается. Здесь мы не только прячем элемент <input type="radio"> с помощью CSS, но и изменяем фоновый цвет элемента с id="output" на тот, который указан в качестве value для <input> и фона для span-элемента, вло женного в <label>.

See the Pen Radio Color Picker by Elen (@ambassador) on CodePen.18892

Переключатели Да-Нет-Возможно

Еще одно цветовое решение от Matthew Blode.

See the Pen Flat Radio - Yes/No by Matthew Blode (@mblode) on CodePen.18892

Трехмерный переключатель от Jon Kantner

See the Pen Radio Tube by Jon Kantner (@jkantner) on CodePen.0

Переключатель макета

Этот пример от Naoya очень удобен для демонстрации макетов с разной шириной. Интересно, что радио-кнопки, а точнее заменяющие их элементы label выглядят как ... ссылки с подчеркиванием выбранного (псевдокласс :checked) в данный момент элемента.

See the Pen CSS Switch Layout by Naoya (@nxworld) on CodePen.18892

Рейтинг в виде звезд от  Jon Kantner

Пример 1

See the Pen Animated Star Rating by Jon Kantner (@jkantner) on CodePen.0

Пример 2

See the Pen
Bouncy Star Rating by Jon Kantner (@jkantner)
on CodePen.0

Вкладки-переключатели с анимацией

See the Pen Sliding tabs | CSS transitions only by Håvard Brynjulfsen (@havardob) on CodePen.0

Переключатель для света

Автор Ryan Mulligan

See the Pen Isometric Light Switch by Elen (@ambassador) on CodePen.0

Возможно, вас еще заинтересует переключатель на основе input type="range".

Выбор блюд

В этом примере от Kris Hedstrom радио-кнопки в какой-то степени похожи на чекбоксы (флажки) - они отмечают ваш выбор в виде галочки.

See the Pen Snacks? Flat radio button inputs... by Kris Hedstrom (@kristofferh) on CodePen.18892

Варианты переключателей с иконками для выбора инструментов, цены и др.

Автор Ivan Grozdic

See the Pen Checkboxes and radios (dark/light) - pure css - #06 by Ivan Grozdic (@ig_design)on CodePen.0

Ваш банковский баланс от того же автора

See the Pen Banking Web App - pure css - #19 by Ivan Grozdic (@ig_design) on CodePen.0

Аккордион с переключением с помощью радио-кнопок

Только CSS, без JavaScript 

See the Pen Accordion with radio by Elen (@ambassador) on CodePen.0

Анимация при переключении выбора

Несколько примеров, в которых использована анимация при переключении между радио-кнопками.

Автор: Tommaso Poletti

See the Pen Jelly Radio Button by Tommaso Poletti (@tomma5o) on CodePen.18892

Простые переключения с эффектом вдавливания от Pamela Dayne

See the Pen Just very simple radio buttons by Pamela Dayne (@pamdayne) on CodePen.18892

Переключение с перепрыгиванием  от Jon Kantner

See the Pen Radio Hopping by Jon Kantner (@jkantner)
on CodePen.0

Анимация при переключении от Jon Kantner

See the Pen Radios With Sliding Focus by Jon Kantner (@jkantner) on CodePen.0

И еще один вариант от того же автора.

See the Pen Dropping Radio Buttons by Jon Kantner (@jkantner) on CodePen.0

Меняющиеся кнопки от Braydon Coyer

See the Pen Radio Button Interactions with GSAP by Braydon Coyer (@braydoncoyer) on CodePen.0

Автор Liam использовал для анимации JS-код.

See the Pen Bulgy radios by Liam (@liamj) on CodePen.18892

Интересное решение с радио-кнопками на темном фоне от Andrej Sharapov

See the Pen Animated SVG radio buttons by Andrej Sharapov (@andrejsharapov) on CodePen.18892

Анимация и стили как для радио-кнопок, так и для флажков от WILDER TAYPE.

See the Pen Ripple animation on input type radio and Checkbox by WILDER TAYPE (@wilder_taype) on CodePen.18892

Использование маски

See the Pen Underground radios by Mikael Ainalem (@ainalem) on CodePen.18892

"Текущая" кнопка

See the Pen Liquid Radio Button by Tamino Martinius (@Zaku) on CodePen.18892

Замечательное решение для переключения кнопок меню

See the Pen Material Radio Button by CODEARMADA (@montechristos) on CodePen.18892

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

See the Pen Input Radio by Andreas Storm (@avstorm) on CodePen.18892

Выбираем кредитную карту вместе с Dean

See the Pen Recreation: Card theme switcher by Dean (@visualcookie) on CodePen.18892

Перепрыгивающий шарик от Jon Kantner

Вариант 1

See the Pen Radio Buttons With Marble and Wood by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Rolling Radio Buttons by Jon Kantner (@jkantner) on CodePen.18892

Вариант 3 от web-tiki 

See the Pen CSS only input radio select concept by web-tiki (@web-tiki) on CodePen.18892

Переключатели в виде блоков с иконками

Автор Gabriel Ferreira предлагает использовать переключатели в виде блоков с анимированными иконками. Это можно сделать не только для Front-End/Back-End, но и для любых других текстов.

See the Pen Radio Button Big Square [Just CSS] by Gabriel Ferreira (@gabrielferreira) on CodePen.18892

Переключатель мужчина-женщина

See the Pen Radio button styling by Morten Olsen (@morten-olsen) on CodePen.18892

Соединительные линии, ведущие к радио-кнопкам

See the Pen Radio Button Circuit by LukasOe (@lukasoe) on CodePen.18892

Переключатели с отметкой в верхнем углу блока

При клике на блоке выбор отмечается сменой цвета и галочкой в круге от Rosa.

See the Pen Checkout Form by Rosa (@RRoberts) on CodePen.18892

Радио-кнопки как переключатели для радио от Jon Kantner

Вариант 1

See the Pen Literal Radio Buttons by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2

See the Pen Literal Radio Buttons (Neumorphic Version) by Jon Kantner (@jkantner) on CodePen.18892

Радио-кнопки для вкладок (табов)

Ronny Siikaluoma предлагает вам использовать радио-кнопки для формирования отзывчивых (адаптивных) вкладок. Заметьте, без всякого JavaScript.

See the Pen Responsive Tabs with Pure CSS by Ronny Siikaluoma (@siiron) on CodePen.18892

Еще один вариант вкладок от Tristan White

See the Pen Tabs (checkbox-hack) by Tristan White (@triss90) on CodePen.18892

Выбор билетов с ценой и временем от Dannie Vinther

See the Pen Choose Ticket [a11y] by Dannie Vinther (@dannievinther) on CodePen.18892

И второй вариант от Ivan Grozdic

See the Pen Choose Ticket - pure css - #08 by Ivan Grozdic (@ig_design) on CodePen.0

Социальные кнопки

В этом примере от Aron использованы не только радио-кнопки, но и флажки (чекбоксы). При клике на элемент вы увидите pop-up окно с названием выбранной компании или соцсети.

See the Pen Pure CSS Option ( radio & checkbox ) No JS by Aron (@Aoyue) on CodePen.18892

Переключение иконок Google maps

See the Pen Google maps radio buttons CSS only by Elias Meire (@eliasmeire) on CodePen.18892

Переключение цветовых блоков

В этом примере от Ivan Grozdic элементы label выглядят и работают как ссылки, но без JavaScript, сортируя цветовые блоки.

See the Pen Content filter v2 - pure css - #09 by Ivan Grozdic (@ig_design) on CodePen.18892

Использование радио-кнопок для фильтации по категориям

Автор примера от ресурса Envato Tuts+ предлагают css-код, который без JavaScript служит для фильтрации категорий портфолио.

See the Pen Build a Filtering Component in Pure CSS by Envato Tuts+ (@tutsplus) on CodePen.0

Отличный пример выбора цвета для стула от Ivan Grozdic

Подходит для интернет-магазина

See the Pen Product page - pure css - #17 by Ivan Grozdic (@ig_design) on CodePen.0