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

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

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