Стилизация radio на CSS
Давайте немного освежим в памяти, для чего нужны radio кнопки на сайтах. Radio кнопка – это переключатель, который используют в формах, когда пользователю надо сделать выбор, между несколькими вариантами. Например, выбрать между марками автомобилей, для последующей аренды.
Дизайнеры рисуют в макетах радиокнопки, как им нравиться и совсем не обязательно круглой формы. Нам же, верстальщикам, надо думать, каким образом стилизовать всю эту красоту.
HTML код
Атрибут for у тега label устанавливает связь с input через id, в том случае если, input не вложен в label. Значения у for и id, должны быть одинаковыми. В нашем примере, у первой связки – honda, а у второй renault. Когда пользователь должен выбрать только один вариант, следует прописать обоим инпутам, атрибут name с одинаковым значением (car). Атрибут type указывает, что инпут надо отобразить, как radio кнопку (круглым).
Обернем первую связку input+label в div с классом radio, то же самое сделаем для второй связки. Присвоим так же классы input и label, для их дальнейшей стилизации.
<div class="radio">
<input class="radio_input" name="car" type="radio" id="honda">
<label class="radio_label" for="honda">Honda</label>
</div>
<div class="radio">
<input class="radio_input" name="car" type="radio" id="renault">
<label class="radio_label" for="renault">Renault</label>
</div>
По умолчанию, браузер отобразит любой элемент формы. На картинке ниже, вы можете увидеть наши radio, без CSS стилей.
Скажем спасибо браузеру и погрузимся в CSS код для стилизации radio кнопок.
CSS-код
Вложенные теги input+label, позиционируем относительно родителя – div с классом radio.
.radio {
position: relative;
margin-bottom: 1rem;
}
Спрячем дефолтные маленькие кружочки, свойство appearance обязательно прописываем с вендорными префиксами.
.radio_input {
-webkit-appearance: none;/* Chrome */
-moz-appearance: none;/* Firefox */
appearance: none;/* убираем стандартные кружочки */
position: absolute;
}
Стилизуем текст внутри тега label.
.radio_label {
padding-left: 25px;/* отступ слева */
font-size: 1rem;
color: #444;
cursor: pointer; /* курсор рука */
}
Создадим два состояния radio кнопок, с помощью псевдоэлементов before+after. Стилизуем before, как пустой белый кружок, after – кружок с цветным фоном, изображающий отмеченное состояние. На деле, круг с меньшим диаметром after, будет находиться внутри круга с большим диаметром before.
Стилизуем псевдоэлемент before
.radio_label:before {
content: "";
display: block; /* не в строку */
width: 16px; /* ширина блока */
height: 16px;/* высота блока */
border: 1px solid #ccc;/* рамка */
background-color: #fff; /* цвет фона */
border-radius: 50%;/* получаем круг */
position: absolute;/* расположен точно в родителе */
top: 0; /* расстояние от верха родителя */
left: 0;/* расстояние слева от родителя */
z-index: 1; /* на нижнем слое */
transition: border .1s linear;/* плавный переход для border */
}
Стилизуем псевдоэлемент after
.radio_label:after {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: #49d120;
border-radius: 50%;
opacity: 0; /* полностью прозрачный */
position: absolute;
top: 3px;
left: 3px;
z-index: 2;/* на верхнем слое */
transition: opacity .1s linear; /* плавный переход для opacity */
}
Нам, нужно менять вид кружка, только при отмеченном состоянии (checked). Когда пользователь кликает в поле input, рамка у before меняет свой цвет.
.radio_input:checked + .radio_label:before {
border-color: #319612;
}
А у after, прозрачный фон, становится непрозрачным, кружок окрашивается в зеленый цвет.
.radio_input:checked + .radio_label:after {
opacity: 1;
}
Таким образом, в неотмеченном состоянии, поле input – белое. А в отмеченном состоянии – зелёное. Мы получили стилизованные radio кнопки на чистом CSS.
Демонстрация примера
-
Создано 24.05.2019 10:19:43
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.