1:56
Автор: Рубрика: CSS-рецепты Комментариев нет

Как сделать на css красивые radio-кнопки (переключатели)?

Всех приветствую. Сегодня я напишу достаточно интересную статью о том, как сделать в css красивые radio-кнопки переключатели, ведь по умолчанию в html они выглядят, мягко говоря, ужасно. Будем это исправлять! smile Что-то подобное я уже показывал вам на примере чекбоксов в этой статье, но сегодня мы займемся радиокнопками и будет другой пример.

Реализуем пример с выбором пола

На многих сайтах при регистрации вас попросят выбрать пол. Реализуется такой функционал очень просто за счет стандартных возможностей 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 после радиокнопки, а не перед. Это важно.

И сразу же убираем кнопки с экрана:

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

input[type="radio"] {
display:none;
}

Значит, задумка у меня такая — вместо кнопок сделаем иконки, а при выборе одной из иконок пусть она окрашивается в зеленый цвет, как бы сигнализируя, что выбор успешно сделан. Итак, вот 2 иконки, которые я по-быстрому нашел в интернете:
man

woman

Начнем с иконки для мужчин. Во-первых, ее нужно задать в качестве фона. Во-вторых, нужно указать явно размеры лейбла. В качестве дополнительной стилизации я пропишу серую рамку и скругление. Свойство 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. Но я уже этот момент упустил, поэтому показываю так.
пол
Иконки готовы, остается сделать так, чтобы при нажатии на иконку она окрашивалась, например, в зеленый цвет. Для этого я предварительно подредактировал иконки в графическом редакторе, чтобы они выглядели так:
man2

woman2
Отлично, остается реализовать сам механизм смены иконок при нажатии на кнопки, это делается вот так:

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 нам удалось провернуть такой трюк.

Что ж, жду ваших вопросов, если они есть, а статью на этом закончу.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Комментариев нет