Стилизация переключателей

Стилизация переключателей происходит аналогично стилизации флажков — мы скрываем исходный элемент <input>, а вместо него стилизуем элемент, идущий в коде HTML после <input>. При этом обязательно используем <label>, без которого поведение переключателя работать не будет. Поскольку переключатели обычно вставляются группой, то связывать <input> с <label> через идентификатор не очень удобно из-за того, что придётся вводить множество идентификаторов. Так что поступим иначе — вставим <input> внутрь <label>, а после <input> добавим элемент <span>.

<label><input type="radio"><span></span></label>

Вид самого переключателя мы задаём через селектор span, а вид выбранного переключателя через селектор :checked+span. В примере 1 показано создание круглого переключателя с белой точкой по центру.

Пример 1. Стилизация переключателя

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Переключатели</title> <style> .radio input { display: none; /* Прячем исходный переключатель */ } .radio span { position: relative; /* Относительное позиционирование */ display: inline-block; /* Строчно-блочный элемент */ width: 20px; height: 20px; /* Размеры */ background: #F5F5F5; /* Серый цвет фона */ border-radius: 50%; /* Круглый переключатель */ box-shadow: inset 0 0 5px rgba(0,0,0,0.5); /* Тень внутри */ } .radio input:checked + span { background: #F44336; /* Красный цвет фона */ } /* Добавляем белую точку по центру */ .radio input:checked + span::before { content: ''; position: absolute; left: 6px; top: 6px; background: #fff; width: 8px; height: 8px; border-radius: 50%; } </style> </head> <body> <p>Укажите ваш пол:</p> <p><label class="radio"><input type="radio" name="g" checked><span></span> Мужской</label> <label class="radio"><input type="radio" name="g"><span></span> Женский</label> <label class="radio"><input type="radio" name="g"><span></span> Не скажу</label></p> </body> </html>

Результат данного примера показан на рис. 1. Элемент <span> делаем квадратным, а затем превращаем в круг через свойство border-radius со значением 50%. Для красоты добавляем внутреннюю тень с помощью box-shadow и значением inset. Окончательно соединяем псевдокласс :checked и псевдоэлемент ::before для отображения белой точки у выбранного переключателя.

Вид переключателя