Стилизация радиокнопок на 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.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.
Стилизация input radio и checbox кнопок (на чистом CSS)
Сегодня хочу поделится с вами несколькими вариантами стилизации input type=”radio” а так же input type=”checkbox” . Ни для кого не секрет, что без стилизации этих элементов не бывает жизни у верстальщиков. На своей практике я почти в каждом проекте встречаю кастомную стилизацию radio и checbox.
В интернете есть масса способов их стилизации, но большинство из них либо устарели, либо используют скрпты. Что в свою очередь увеличивает вес страницы. Это для SEO не есть хорошо. И так, давайте начнем, ниже я буду показывать вам готовые примеры стилизации input radio и checbox (на чистом css)
1. Стилизация radio кнопок
Данный способ подойдет тем, кому надо оформить radio в виде кнопок, без флажков и т.д.
2. Стилизация checkbox флажков
Оформляем ваши checkbox флажки. Данный способ стилизирует сами флажки, думаю проблем разобраться у вас не будет. Для самого флажка checkbox используется svg картинка, для качественного отображения на retina экранах. Пример с рабочего сайта:
Читайте також: Адаптивне, вертикальне mega menu для каталогу, інтернет-магазину
3. Стилизация radio флажков
И последний вариант, это оформление radio флажков.
Стилизация Radio Button
Несколько примеров изменения вида радио кнопок на чистом CSS. Единственное неудобство метода в том, что приходится указывать уникальные id.
Стандартные элементы
Понадобятся всего два изображения, которые можно объединить в спрайт. Состояния заблокированного элемента и при наведении можно сделать CSS фильтрами.
.form_radio < margin-bottom: 10px; >.form_radio input[type=radio] < display: none; >.form_radio label < display: inline-block; cursor: pointer; position: relative; padding-left: 25px; margin-right: 0; line-height: 18px; user-select: none; >.form_radio label:before < content: ""; display: inline-block; width: 17px; height: 18px; position: absolute; left: 0; bottom: 1px; background: url(/img/radio-1.png) 0 0 no-repeat; >/* Checked */ .form_radio input[type=radio]:checked + label:before < background: url(/img/radio-2.png) 0 0 no-repeat; >/* Hover */ .form_radio label:hover:before < filter: brightness(120%); >/* Disabled */ .form_radio input[type=radio]:disabled + label:before
Radio в виде кнопок
.form_radio_btn < display: inline-block; margin-right: 10px; >.form_radio_btn input[type=radio] < display: none; >.form_radio_btn label < display: inline-block; cursor: pointer; padding: 0px 15px; line-height: 34px; border: 1px solid #999; border-radius: 6px; user-select: none; >/* Checked */ .form_radio_btn input[type=radio]:checked + label < background: #ffe0a6; >/* Hover */ .form_radio_btn label:hover < color: #666; >/* Disabled */ .form_radio_btn input[type=radio]:disabled + label
Группа кнопок
