Стилизация радио-кнопок: как создать уникальный дизайн

Радио-кнопки в веб-дизайне часто представляют собой стандартные элементы, внешний вид которых зависит от браузера. Для начинающих разработчиков стилизация этих элементов может стать вызовом. В этой статье мы рассмотрим способы отключения предустановленных стилей и создания уникального дизайна радио-кнопок.

Содержание

Содержание
Отключение предустановленных стилей
Подводные камни
Скрытие стандартных радио-кнопок

Содержание

Отключение предустановленных стилей
Подводные камни
Скрытие стандартных радио-кнопок

Отключение предустановленных стилей

Один из простых способов изменить внешний вид радио-кнопок — использование CSS-свойства appearance. Пример кода:

<input type="radio" name="demo" value="1" id="radio-1" class="form-radio">
<label for="radio-1">Пункт 1</label>
<input type="radio" name="demo" value="2" id="radio-2" class="form-radio">
<label for="radio-2">Пункт 2</label>

CSS:

.form-radio {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* Собственные стили */
}

/* Стили для выбранного элемента */
.form-radio:checked {
/* Собственные стили */
}

/* Стили при наведении */
.form-radio:hover {
/* Собственные стили */
}

Свойство appearance: none; убирает предустановленные стили элементов input type="radio", позволяя применить собственные стили.

Подводные камни

Важно отметить, что appearance: none; не работает в IE 10-11 и Edge. В старых версиях браузеров могут возникать неожиданные результаты. Более подробно можно ознакомиться с этим на сайтах caniuse и MDN.

Скрытие стандартных радио-кнопок

Для обеспечения кросс-браузерной совместимости и создания уникального дизайна можно использовать следующую схему:

<label for="radio-1" class="form-radio-hidden">
<input type="radio" name="demo" value="1" id="radio-1">
<span class="radio"></span>
<span class="text">Пункт 1</span>
</label>
<label for="radio-2" class="form-radio-hidden">
<input type="radio" name="demo" value="2" id="radio-2">
<span class="radio"></span>
<span class="text">Пункт 2</span>
</label>

CSS:

.form-radio-hidden {
display: flex;
align-items: center;
}

.form-radio-hidden input {
position: absolute;
opacity: 0;
}

.form-radio-hidden .radio {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #999;
background-color: #fff;
cursor: pointer;
transition: .5s all;
}

.form-radio-hidden:hover .radio {
background-color: #f9f9f9;
}

.form-radio-hidden input:checked + .radio {
background-color: #555;
}

.form-radio-hidden input + .radio + .text {
margin-left: 10px;
font-size: 14px;
color: #777;
}

В данном случае стандартные радио-кнопки скрыты, а вместо них используются стилизованные span элементы. Этот подход обеспечивает кросс-браузерную совместимость, включая IE 10-11 и Edge.

Этот способ позволяет создать уникальный и кросс-браузерный дизайн радио-кнопок, сохраняя при этом функциональность и удобство использования.