Стилизация переключателей происходит аналогично стилизации флажков — мы скрываем исходный элемент <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 для отображения белой точки у выбранного переключателя.
Рис. 1. Вид переключателя