Всех приветствую. Сегодня я напишу достаточно интересную статью о том, как сделать в css красивые radio-кнопки переключатели, ведь по умолчанию в html они выглядят, мягко говоря, ужасно. Будем это исправлять! 
Что-то подобное я уже показывал вам на примере чекбоксов в этой статье, но сегодня мы займемся радиокнопками и будет другой пример.
Реализуем пример с выбором пола
На многих сайтах при регистрации вас попросят выбрать пол. Реализуется такой функционал очень просто за счет стандартных возможностей html — радиокнопок, вот так примерно выглядит разметка:
Выберите ваш пол:<br>
Мужской <input type = "radio" name = "sex" id = "man">
Женский <input type = "radio" name = "sex" id = "woman">
Но вот так ужасно это выглядит:
Конечно, дизайн таких кнопок в 99% случаев вас не устроит. Поэтому давайте сегодня преобразуем radio-кнопки. Для этого нам их придется полностью скрыть с экрана, потому что их никак не стилизуешь, сам внешний вид мы оформим через подписи к переключателям (label). Сначала добавим их в разметку:
Выберите ваш пол:<br>
<input type = "radio" name = "sex" id = "man">
<label for="man"></label>
<input type = "radio" name = "sex" id = "woman">
<label for="woman"></label>
Заметьте, что атрибут name у радиокнопок должен быть одинаковым, это говорит о том, что они принадлежат к одной группе, а вот идентификаторы задаем разные. Связь с лейблом происходит с помощью идентификатора и атрибута for, где вписывается название id. ВНИМАНИЕ! Для работоспособности нашего примера обязательно разместите label после радиокнопки, а не перед. Это важно.
И сразу же убираем кнопки с экрана:
input[type="radio"] {
display:none;
}
Значит, задумка у меня такая — вместо кнопок сделаем иконки, а при выборе одной из иконок пусть она окрашивается в зеленый цвет, как бы сигнализируя, что выбор успешно сделан. Итак, вот 2 иконки, которые я по-быстрому нашел в интернете:
Начнем с иконки для мужчин. Во-первых, ее нужно задать в качестве фона. Во-вторых, нужно указать явно размеры лейбла. В качестве дополнительной стилизации я пропишу серую рамку и скругление. Свойство cursor: pointer позволит при курсору при наведении мыши на иконку превращаться в ладошку, как при наведении на ссылку или кнопку. Вот код, который делает все вышеуказанное:
label[for=man]{
background: url(man.png) no-repeat;
width: 100px;
height: 100px;
border: 5px solid #333;
cursor:pointer;
border-radius: 5px;
}
Заметьте, что я не стал прописывать лейблу дополнительный класс или идентификатор, а обратился по значению атрибута. О селекторах атрибутов вы можете почитать здесь.
Вот что получилось:
Теперь нам нужно добавить иконку для женщин:
label[for=woman]{
background: url(woman.png) no-repeat;
width: 100px;
height: 100px;
vertical-align:middle;
border: 5px solid #333;
cursor:pointer;
border-radius: 5px;
}
Обратите внимание на то, что все стили те же самые, только путь к картинке другой. Соответственно, все общие правила мы бы могли вынести просто в селектор label. Но я уже этот момент упустил, поэтому показываю так.
Иконки готовы, остается сделать так, чтобы при нажатии на иконку она окрашивалась, например, в зеленый цвет. Для этого я предварительно подредактировал иконки в графическом редакторе, чтобы они выглядели так:
Отлично, остается реализовать сам механизм смены иконок при нажатии на кнопки, это делается вот так:
input[type="radio"]:checked + label[for=man]{
background:url(man2.png) no-repeat;
}
input[type="radio"]:checked + label[for=woman]{
background:url(woman2.png) no-repeat;
}
Если вы глубоко не изучали селекторы css, то для вас эти куски кода могут показаться непонятными. Если объяснять просто, то мы говорим браузеру вот что: когда радиокнопка выбрана (активна), поменяй фон у лейбла с атрибутом for = man/ for = woman, который стоит сразу же за кнопкой. Вот почему я просил вас разместить подписи (label) ниже кнопок, а не наоборот.
Как выглядит итоговый результат, вы можете посмотреть в демо, ссылка на него есть в начале статьи. Вот так будут выглядеть кнопки при выборе мужского пола:
Но вы, возможно, спросите : «Ведь мы вообще убрали радиокнопки с экрана, как вообще клик по подписи может сделать кнопку активной?» В том-то и дело, что подпись к полю имеет замечательное свойство — при клике по подписи автоматически включается и кнопка. Именно благодаря этой особенности html нам удалось провернуть такой трюк.
Что ж, жду ваших вопросов, если они есть, а статью на этом закончу.