Стилизация 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 экранах. Пример с рабочего сайта:
Читайте також: Що таке технологія GPON та як підключити?
3. Стилизация radio флажков
И последний вариант, это оформление radio флажков.
Стилизация checkbox и radiobutton на CSS
Сегодня я хочу рассказать, как можно самостоятельно изменить внешний вид и анимацию стандартных элементов управления checkbox и radiobutton средствами CSS. Например на такое:
Для начала создадим каркас страницы index.html
Если открыть эту страницу в браузере, то увидим два 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
В итоге получим готовый результат:
Можно поиграться с параметрами в стилях и настроить отображение так, как нравится, но общий принцип визуализации, я думаю понятен и без особых объяснений.
Стилизация 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
Группа кнопок
