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

Сегодня я напишу достаточно интересную статью о том, как сделать в 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 иконки, которые я по-быстрому нашел в интернете:

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

Понравилась статья? Поделиться с друзьями:
Добавить комментарий