Как стилизовать radio на css

Стилизация checkbox и radiobutton на CSS

Сегодня я хочу рассказать, как можно самостоятельно изменить внешний вид и анимацию стандартных элементов управления checkbox и radiobutton средствами CSS. Например на такое:

Для начала создадим каркас страницы index.html

    
 Checkbox 1 
 
 Checkbox 2 
 
 Radio 1 
 
 Radio 2 
   

Если открыть эту страницу в браузере, то увидим два checkbox’а, один из которых будет с галочкой, и две radio-кнопки, одна из которых также будет выбранной:

Начинаем менять стили. Для этого создадим файл style.css и подключим его в index.html

В нем для начала уберем стандартное отображение элементов

/* style.css */ input[type=»checkbox»], input[type=»radio»]

В результате получим только оставшиеся label‘ы. Именно их мы и будем видоизменять:

Для начала увеличим высоту строк и отодвинем label’ы от левого края, чтобы там поместились наши новые элементы:

/* style.css */ . input[type=»checkbox»] + label, input[type=»radio»] + label < position: relative; cursor: pointer; line-height: 30px; >input[type=»checkbox»] + label < padding: 0 0 0 60px; >input[type=»radio»] + label

Дальше начинаем рисовать сами элементы. Для этого воспользуемся псевдоэлементами :before и :after. Начнем с состояния «выключено»:

/* style.css */ . input[type=»checkbox»] + label:before < content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: rgb(255, 100, 100); box-shadow: inset 0 2px 3px rgba(0,0,0,.2); >input[type=»radio»] + label:before

В результате должно получиться следующее:

Дальше пропишем стили для элементов в статусе «включено»:

/* style.css */ . input[type=»checkbox»] + label:after < content: ''; position: absolute; top: -1px; left: 3px; width: 20px; height: 20px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; >input[type=»checkbox»]:checked + label:before < background: #9FD468; >input[type=»checkbox»]:checked + label:after < left: 27px; >input[type=»radio»] + label:after < content: ''; position: absolute; top: 9px; left: 12px; width: 0px; height: 0px; border-radius: 50%; background: rgb(165, 165, 165); box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; >input[type=»radio»]:checked + label:after

В итоге получим готовый результат:

Можно поиграться с параметрами в стилях и настроить отображение так, как нравится, но общий принцип визуализации, я думаю понятен и без особых объяснений.

Стилизация радиокнопок на CSS

На этом уроке вы узнаете, как стилизовать стандартные радио кнопки под свой дизайн, с помощью HTML и CSS. На сайтах радио кнопки чаще всего используются в формах, когда пользователю предоставляется сделать выбор в рамках указанных вариантов.

Изображаем настоящую радиокнопку на HTML

Отрисовывается радиокнопка с помощью тега input с типом radio. Обычно в комплекте с кнопкой идет label — привязанная к кнопке метка в виде текста. Когда мы кликаем по тексту, то радиокнопка становится выбранной, необязательно целиться в сам кругляш.

Вот так выглядит стандартная кнопка в браузере Google Chrome. В других браузерах её внешний вид будет отличаться. Но по любому нам нужно учиться стилизовать радиокнопки, чтобы не впадать в панику, беря заказы на верстку. Элементы форм есть практически на всех сайтах.

Чтобы было из чего выбирать, создадим вторую радиокнопку. Обе кнопки будет объединять атрибут name с одинаковым значением — payment. У объединенных радиокнопок в группу по атрибуту name, можно будет выбрать только одну. Общий класс form-group задает отступы между кнопками. А класс real-radio-btn скрывает реальную радиокнопку. Выбранная радиокнопка передает на сервер значение, чтобы было понятно, что именно выбрал пользователь. Поэтому пропишем каждой радиокнопке свое уникальное значения value.

Кастомная радиокнопка

Идея кастомизации реальной кнопки заключается в ее сокрытии и создании рядом новой кастомной радио кнопки. По другому никак, с помощью CSS нельзя изменить внешний вид инпута. Кастомная радиокнопка будет выполнять маскировочно-декоративную роль для реальной кнопки.

HTML код кастомной кнопки мы разместим следующей строчкой под инпутом.

Теперь у нас есть реальная и кастомная радиокнопки, но чтобы что-то изменилось необходимо задействовать CSS стили. Кастомная кнопка состоит из внешнего и внутреннего круга. Чтобы не создавать лишнего тега, нарисуем внутренний круг с использованием псевдоэлемента before.

/* Рисуем внешний круг радиокнопки*/
.custom-radio-btn position: relative; /* Родительский элемент*/
display: inline-block; /* Для применения рамок, размеров*/
width: 16px;
height: 16px;
background: #fff;
border: 2px solid #e80cf0; /* Толщина, стиль, цвет рамки*/
border-radius: 50%; /* Получение круга*/
vertical-align: text-top; /* Выравнивание кнопки по центру*/
margin-right: 5px; /* Отступ между кнопкой и меткой*/
>

/* Рисуем внутренний круг */
.custom-radio-btn::before content: »;
display: inline-block;
width: 8px;
height: 8px;
background: #a3a4a7;
border-radius: 50%;

/* Выравниваем по центру относительно внешнего круга */
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(0);

/* Плавный переход трансформации масштабирования */
transition: 0.2s ease-in;
>

Как работает механизм checked у кастомной кнопки

Кастомная кнопка сама по себе не может быть выбрана, если мы кликнем по ней или по тексту. Когда мы кликаем по тексту, то выбирается реальная кнопка, только кастомная кнопка об этом не знает. Формируем сложный селектор из реальной кнопки и соседней. Селектор с оператором (+) как раз создаст зависимость появления внутреннего круга от состояния реальной кнопки. Если реальная кнопка находится в состоянии checked, значит выполняется свойство трансформации для кастомного внутреннего круга.

.real-radio-btn:checked + .custom-radio-btn::before transform: translate(-50%, -50%) scale(1);
>

Скрываем реальную радио кнопку

Нельзя использовать свойство display: none, тогда не будет работать табуляция (клавиша tab).

.real-radio-btn /* Скрываем реальную радио кнопку*/
width: 0;
height: 0;
position: absolute;
opacity: 0;
z-index: -1;
>

Без хороших знаний HTML|CSS будет трудно освоить профессию верстальщика. Мой видеокурс в короткие сроки научит верстать вас сайты любой сложности.

Посмотрите демо на CodePen

Создано 01.01.2021 10:06:40

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

CSS стилизация checkbox и radio — 2 варианта

Как осуществляется создание кастомного чекбокса или переключателя

Данный процесс осуществляется посредством скрытия стандартного элемента и создания с помощью CSS другого «поддельного», такого как мы хотим .

Но как же это будет работать, если стандартный input скрыть? Это можно выполнить благодаря тому, что в HTML переключить состояние checked можно не только с помощью самого элемента input , но и посредством связанного с ним label .

В HTML связывание label с input выполняется одним из 2 способов:

1. Посредством помещения элемента input в label :

 Happy 

2. Посредством задания элементу input атрибута id , а label – for с таким же значением как у id .

 Happy

В этой статье мы подробно разберём шаги по кастомизации checkbox и radio , в которых label с input свяжем по 2 варианту. Создание «поддельного» чекбокса выполним с использованием псевдоэлемента ::before , который поместим в label . При этом никакие дополнительные элементы в разметку добавлять не будем.

Создание стильного чекбокса

Процесс замены стандартного вида чекбокса на кастомный осуществим посредством выполнения следующей последовательности шагов.

Шаг 1. Создадим разметку.

 Happy

При создании разметки очень важно соблюдать последовательность расположения элементов. Это необходимо, потому что в зависимости от того, как они расположены мы будем составлять выражения для выбора элементов в CSS и назначать им стили.

В этом примере элемент label расположен после input . Связь label с input осуществляется посредством соответствия значения for элемента label с id элемента input .

В примере к элементу input добавлен класс custom-checkbox . Данный класс мы будем использовать при составлении селекторов и тем самым с помощью него определять элементы к которым следует добавить стилизованный чекбокс вместо обычного. Т.е. его присутствие или отсутствие будет определять с каким чекбоксом (со стандартным или поддельным) будет выводится элемент input с type=»checkbox» .

Шаг 2. Напишем стили для скрытия стандартного элемента input .

.custom-checkbox { position: absolute; z-index: -1; opacity: 0; }

Мы не будем использовать display: none , а установим ему стили, с помощью которых уберём его из потока ( position: absolute ), поместим его ниже существующих элементов ( z-index: -1 ), а также сделаем его полностью прозрачным ( opacity: 0 ). Зачем это нужно? Это нам необходимо для того, чтобы мы могли получить состояние фокуса, а затем стилизовать «подделный» checkbox или radio , когда он будет находиться в нём.

Шаг 3. Создадим поддельный чекбокс.

.custom-checkbox+label { display: inline-flex; align-items: center; user-select: none; } .custom-checkbox+label::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 0.25em; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }

Создание «поддельного» чекбокса выполним с помощью псевдоэлемента ::before . Посредством CSS зададим ему размеры (в данном случае 1em x 1em ), а затем нарисуем его с помощью border: 1px solid #adb5bd . Свойства начинающие со слова background будут определять положение самого флажка (когда checkbox будет в состоянии checked ).

Первое правило необходимо для вертикального центрирования флажка и надписи к нему. Это действие в примере выполнено через CSS Flexbox.

Шаг 4. Создадим стили при нахождении элемента в состоянии checked .

.custom-checkbox:checked+label::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); }

В этом коде при получении элементом состояния checked применим к псевдоэлементу ::before находящемуся в label стили, посредством которых установим цвет границы, цвет фону и фоновую картинку (флажок) в формате svg.

Шаг 5. Добавим код для стилизации чекбокса при нахождении его в состояниях hover , active , focus и disabled .

/* стили при наведении курсора на checkbox */ .custom-checkbox:not(:disabled):not(:checked)+label:hover::before { border-color: #b3d7ff; } /* стили для активного состояния чекбокса (при нажатии на него) */ .custom-checkbox:not(:disabled):active+label::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для чекбокса, находящегося в фокусе */ .custom-checkbox:focus+label::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ .custom-checkbox:focus:not(:checked)+label::before { border-color: #80bdff; } /* стили для чекбокса, находящегося в состоянии disabled */ .custom-checkbox:disabled+label::before { background-color: #e9ecef; }

Разработка кастомного переключателя

Стилизация переключателя ( input с type=»radio» ) выполняется аналогично, т.е. посредством тех же шагов которые мы применяли при кастомизации чекбокса.

Итоговый набор стилей для кастомного оформления input с type=»radio» :

  Green

Ещё примеры по кастомизации checkbox и label

В этом разделе представлены следующие примеры:

• оформление чекбокса, когда input расположен в label
• оформление переключателя, когда input расположен в label

1. Стилизация checkbox, когда input расположен в label .

  Indigo 

/* для элемента input c type="checkbox" */ .custom-checkbox>input { position: absolute; z-index: -1; opacity: 0; } /* для элемента label, связанного с .custom-checkbox */ .custom-checkbox>span { display: inline-flex; align-items: center; user-select: none; } /* создание в label псевдоэлемента before со следующими стилями */ .custom-checkbox>span::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 0.25em; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } /* стили при наведении курсора на checkbox */ .custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before { border-color: #b3d7ff; } /* стили для активного чекбокса (при нажатии на него) */ .custom-checkbox>input:not(:disabled):active+span::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для чекбокса, находящегося в фокусе */ .custom-checkbox>input:focus+span::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ .custom-checkbox>input:focus:not(:checked)+span::before { border-color: #80bdff; } /* стили для чекбокса, находящегося в состоянии checked */ .custom-checkbox>input:checked+span::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); } /* стили для чекбокса, находящегося в состоянии disabled */ .custom-checkbox>input:disabled+span::before { background-color: #e9ecef; }

2. Стилизация radio , когда input расположен в label .

  Indigo 

/* для элемента input c type="radio" */ .custom-radio>input { position: absolute; z-index: -1; opacity: 0; } /* для элемента label связанного с .custom-radio */ .custom-radio>span { display: inline-flex; align-items: center; user-select: none; } /* создание в label псевдоэлемента before со следующими стилями */ .custom-radio>span::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 50%; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } /* стили при наведении курсора на радио */ .custom-radio>input:not(:disabled):not(:checked)+span:hover::before { border-color: #b3d7ff; } /* стили для активной радиокнопки (при нажатии на неё) */ .custom-radio>input:not(:disabled):active+span::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для радиокнопки, находящейся в фокусе */ .custom-radio>input:focus+span::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */ .custom-radio>input:focus:not(:checked)+span::before { border-color: #80bdff; } /* стили для радиокнопки, находящейся в состоянии checked */ .custom-radio>input:checked+span::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } /* стили для радиокнопки, находящейся в состоянии disabled */ .custom-radio>input:disabled+span::before { background-color: #e9ecef; }

Стилизация флажков и переключателей с использованием CSS3

При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.

Итак, для начала добавим несколько обычных флажков и переключателей на форму:

/* Мои флажки */ 
 Флажок 1 
 
 Флажок 2 
 
 Флажок 3 
 /* Мои переключатели */ 
 Переключатель 1 
 
 Переключатель 2 
 
 Переключатель 3 
 

Перенесем стандартное отображение элементов за область видимости и добавим отступы к соседствующим меткам:

input[type="checkbox"]:checked, input[type="checkbox"]:not(:checked), input[type="radio"]:checked, input[type="radio"]:not(:checked) < position: absolute; left: -9999px; >input[type="checkbox"]:checked + label, input[type="checkbox"]:not(:checked) + label, input[type="radio"]:checked + label, input[type="radio"]:not(:checked) + label

Перед метками добавим стилизованные контейнеры для наших пользовательских элементов. Для флажков это будут квадраты с немного закругленными для красоты краями, а для переключателей — просто небольшие круги:

input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before, input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before < content: ""; position: absolute; left: 0px; top: 0px; width: 18px; height: 18px; border: 1px solid #dddddd; background-color: #ffffff; >input[type="checkbox"]:checked + label:before, input[type="checkbox"]:not(:checked) + label:before < border-radius: 2px; >input[type="radio"]:checked + label:before, input[type="radio"]:not(:checked) + label:before

Теперь добавим индикаторы выбора. Для флажков это будут галки, для переключателей — заполненные цветом круги меньшего размера, чем сам контейнер. Для большего эффекта зададим также небольшую анимацию:

input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after, input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after < content: ""; position: absolute; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; >input[type="checkbox"]:checked + label:after, input[type="checkbox"]:not(:checked) + label:after < left: 3px; top: 4px; width: 10px; height: 5px; border-radius: 1px; border-left: 4px solid #e145a3; border-bottom: 4px solid #e145a3; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); >input[type="radio"]:checked + label:after, input[type="radio"]:not(:checked) + label:after

Чтобы изобразить знак галки, мы поворачиваем небольшой прямоугольник, две стороны которого окрашены в цвет, на 45 градусов против часовой стрелки.

Обратите внимание, что селекторы :before и :after позволяют добавлять содержание непосредственно до и после содержимого самой метки. Так как для меток мы задали относительное позиционирование (position: relative), то можем задавать контекстное абсолютное позиционирование для их содержимого.

Осталось скрыть индикаторы выбора, когда элемент не выбран, и, соответственно, отображать их, когда элемент находится в выбранном состоянии:

input[type="checkbox"]:not(:checked) + label:after, input[type="radio"]:not(:checked) + label:after < opacity: 0; >input[type="checkbox"]:checked + label:after, input[type="radio"]:checked + label:after

Добавим, что описанное здесь решение работает во всех современных версиях браузеров Chrome, Firefox, Safari, Opera, а также, начиная с версии 9, и в Internet Explorer.

Полностью CSS определения можно загрузить здесь.