Стилизация чекбоксов css внутри label

Стилизация checkbox. Кастомные чекбоксы

Стилизация checkbox — то, с чем сталкивается каждый начинающий верстальщик. Часто это становится проблемой и занимает много времени. Но после этого урока вы сможете делать кастомные чекбоксы любого вида. Суть любого стилизованного чекбокса — спрятать оригинальные чекбокс, и активировать его с помощью клика на . Если вы сможете понять принцип работы, в дальнейшем у вас не возникнет сложностей со стилизацией чекбоксов и радио кнопок. Большим преимуществом описанного метода является то, что мы не лишаемся стандартной валидации и не возникает никаких проблем при отправке формы. Мы по максимуму используем встроенный в браузер функционал, что всегда хорошо.

Если вы сразу хотите посмотреть готовый код и пример — добро пожаловать на codepen .

Стилизация checkbox — HTML разметка

Как я и говорил, основная суть в создании кастомных чекбоксов — скрыть оригинальный чекбокс и создать свой, со своим дизайном и активированным состоянием. HTML код не очень сложный, описывать там нет особо чего, поэтому я просто оставлю комментарии в нем. Единственное, что нужно уточнить — я использую код svg иконки, вы же можете использовать любую картинку в этом месте с помощью тега , или вообще текст.

 
 // SVG - сама иконка чекбокса
 Пример текста 

CSS код для создания кастомного чекбокса

Для css кода так же оставлю комментарии. Как видно, оригинальный чекбокс мы скрываем совсем. Далее элемент .checkbox стилизуем под сам чекбокс. Иконку просто выравниваем по центру и скрываем её. Далее указываем, что при активированном чекбоксе иконка должна отображаться. Как и говорилось раньше, активироваться чекбокс будет за счет

.custom-checkbox < // Тут мы просто центрируем чекбокс и текст display: flex; align-items: center; >.custom-checkbox .checkbox < margin-right: 10px; >.custom-checkbox input < -webkit-appearance: none; // Скрываем оригинальный чекбокс position: absolute; // После скрытия оставется пустое пространство, // но абсолютное позиционирование это устранит >.checkbox < // Тут стилизуем сам чекбокс position: relative; width: 20px; height: 20px; border: 2px solid red; background: red; >.checkmark < // Тут центритуем и пишем стили для иконки position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: auto; display: none; // Скрываем иконку >.custom-checkbox input:checked ~ .checkbox .checkmark < display: block; // Показываем иконку, когда чекбокс активен >.custom-checkbox input:checked ~ .checkbox < background: blue; border: 2px solid blue; // Если вы хотите не только отображать икнонку, но и менять // сам чекбокс после активации - напишите сюда код для активного состояния >

Как результат получим кастомный чекбокс

Спасибо, что прочитали! Если у вас остались любые вопросы — задавайте их в комментариях на YouTube, или пишите мне в Telegram, с радостью всем помогу.

Так же буду очень благодарен, если вы ознакомитесь с другими уроками:

Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)

Источник

Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров

Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила. Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы. Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.

Важные особенности

1. Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег , благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
2. Тег должен находиться до тега (в этом случае состояние элемента формы переключается с помощью атрибута for ), либо он должен находиться внутри тега (в этом случае атрибут for не нужен, но понадобится тег-обертка для текста).

«Фокус» заключается в использовании псевдоселекторов :checked и :not . При этом сам чекбокс или радиокнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов :before и :after для тега или вышеупомянутого тега-обертки.

Стилизация для современных браузеров

Рассмотрим оба вариант расположения стилизуемого элемента формы. Какой из них наиболее удобен — решать вам. Суть от этого не меняется.

Теги чекбокса и радиокнопки находятся перед тегом

В HTML-коде это выглядит следующим образом:

  Я переключаю чекбокс А я переключаю радиокнопку 

Еще раз хочу заострить ваше внимание — тег обязательно должен быть расположен перед тегом . Если вы поменяете их местами, ничего работать не будет.

CSS-код для чекбокса будет таким:

 .checkbox < position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; >.checkbox + label < position: relative; padding: 0 0 0 60px; cursor: pointer; >.checkbox + label:before < content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; >.checkbox + label:after < content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; >.checkbox:checked + label:before < background: #9FD468; >.checkbox:checked + label:after < left: 26px; >.checkbox:focus + label:before

CSS-код для радиокнопки будет таким:

 .radio < position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; >.radio + label < position: relative; padding: 0 0 0 35px; cursor: pointer; >.radio + label:before < content: ''; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; >.radio + label:after < content: ''; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; >.radio:checked + label:after < opacity: 1; >.radio:focus + label:before

С помощью свойств position , z-index и opacity для классов .checkbox и .radio мы визуально прячем оригинальные элементы, при этом они остаются на том же самом месте, где будут стилизованные элементы. А с помощью margin немного смещаем их, чтобы сообщение валидации HTML5 смотрелось гармонично. В зависимости от дизайна чекбокса и радиокнопки этот отступ можно подогнать.

Теги чекбокса и радиокнопки находятся внутри тега

HTML-код в данном случае будет следующим:

По аналогии с предыдущим вариантом — тег обязательно должен быть расположен перед тегами с классом .checkbox__text и .radio__text .

CSS-код для чекбокса будет таким:

 .checkbox input < position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; >.checkbox__text < position: relative; padding: 0 0 0 60px; cursor: pointer; >.checkbox__text:before < content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; >.checkbox__text:after < content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; >.checkbox input:checked + .checkbox__text:before < background: #9FD468; >.checkbox input:checked + .checkbox__text:after < left: 26px; >.checkbox input:focus + .checkbox__text:before

CSS-код для радиокнопки будет таким:

 .radio input < position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; >.radio__text < position: relative; padding: 0 0 0 35px; cursor: pointer; >.radio__text:before < content: ''; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; >.radio__text:after < content: ''; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; >.radio input:checked + .radio__text:after < opacity: 1; >.radio input:focus + .radio__text:before

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

Стилизация с учетом старых браузеров

CSS-код для чекбокса. В комментариях к коду я добавил пояснения касательно браузеров:

 /* Cначала обозначаем стили для IE8 и более старых версий т.е. здесь мы немного облагораживаем стандартный чекбокс. */ .checkbox < vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; >/* Это для всех браузеров, кроме совсем старых, которые не поддерживают селекторы с плюсом. Показываем, что label кликабелен. */ .checkbox + label < cursor: pointer; >/* Далее идет оформление чекбокса в современных браузерах, а также IE9 и выше. Благодаря тому, что старые браузеры не поддерживают селекторы :not и :checked, в них все нижеследующие стили не сработают. В данном случае checked указывается без двоеточия впереди, почему-то это срабатывает именно так. */ .checkbox:not(checked) < position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 20px; >.checkbox:not(checked) + label < position: relative; padding: 0 0 0 60px; >.checkbox:not(checked) + label:before < content: ''; position: absolute; top: -4px; left: 0; width: 50px; height: 26px; border-radius: 13px; background: #CDD1DA; box-shadow: inset 0 2px 3px rgba(0,0,0,.2); transition: .2s; >.checkbox:not(checked) + label:after < content: ''; position: absolute; top: -2px; left: 2px; width: 22px; height: 22px; border-radius: 10px; background: #FFF; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: .2s; >.checkbox:checked + label:before < background: #9FD468; >.checkbox:checked + label:after < left: 26px; >.checkbox:focus + label:before

CSS-код для радиокнопки:

 .radio < vertical-align: top; width: 17px; height: 17px; margin: 0 3px 0 0; >.radio + label < cursor: pointer; >.radio:not(checked) < position: absolute; z-index: -1; opacity: 0; margin: 10px 0 0 7px; >.radio:not(checked) + label < position: relative; padding: 0 0 0 35px; >.radio:not(checked) + label:before < content: ''; position: absolute; top: -3px; left: 0; width: 22px; height: 22px; border: 1px solid #CDD1DA; border-radius: 50%; background: #FFF; >.radio:not(checked) + label:after < content: ''; position: absolute; top: 1px; left: 4px; width: 16px; height: 16px; border-radius: 50%; background: #9FD468; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); opacity: 0; transition: .2s; >.radio:checked + label:after < opacity: 1; >.radio:focus + label:before

Примеры

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

Смотрите также

• jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select) 2614 комментариев
• Верстка красивых тегов для сайта + бонус 25 комментариев
• Зеленый свет CSS-свойствам при верстке под IE8 и выше 26 комментариев
• jQuery-плагин для стилизации input[type=»radio»] 38 комментариев

Источник

Стилизация флажков (чекбоксов) в CSS

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

Теперь рассмотрим CSS-стили:

Если проанализировать код CSS, то видно, что элемент input мы прячем (свойство display: none), а все остальные стили прописаны для элемента label , а также псевдоэлементов label::before и label::after. Изменения внешнего вида также осуществляются для псевдокласса :checked, который имеет смысл использовать для флажков и радио-кнопок.

Еще ряд похожих вариантов с анимацией вам предлагает Himalaya Singh в своем примере.

See the Pen Simple CSS Checkbox by Tristan White (@triss90) on CodePen.18892

Примеры стилизации флажков с ресурса codepen.io

Как работает стилизация

В этом примере видно, где расположен флажок, который обычно скрывается с помощью свойства display: none, и как стилизованы label . Откройте вкладку CSS и проанализируйте код.

Простое решение для флажков и переключателей от Jon Kantner.

Близкие к стандартным варианты флажков, переключателей и выпадающих списков от Kenan Yusuf

Зачеркивание при выборе флажка с анимацией

Несколько интересных решений для флажков и переключателей от Brad Bodine

See the Pen CSS3 Checkbox Styles by Brad Bodine (@bbodine1) on CodePen.18892

Несколько похожих переключений состояний чекбокса от Olivia Ng

Разные виды переключателей от Mauricio Allende

Анимированное переключение состояний флажка в виде пилюли

Круглая кнопка с анимацией от mandycodestoo

See the Pen 100dayscss-66 by @mandycodestoo (@mandycodestoo) on CodePen.18892

Анимация текста флажков и радио-кнопок от Raúl Barrera

Подсветка текста label + анимация выбора чекбокса от Adam Quinlan

See the Pen chippy checkbox inputs by Adam Quinlan (@quinlo) on CodePen.18892

Анимированные флажки с изменением цвета на основе css-переменных от Stas Melnikov

Анимация флажков с переворотом

Анимация флажков и переключателей в стиле Material Design от Matt Sisto

Перекатывающийся шарик от Jon Kantner

See the Pen Toy Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Вариант 2 со скрепкой

Карандаш для отметки выбора флажка

Еще один вариант анимации от Jon Kantner, но с появлением карандаша. Отличное решение для тестов, например.

Меняем цветовую схему переключателем

Автор Jon Kantner предлагает вашему вниманию вариант кода, при котором клик на чекбоксе меняет цвет фона.

Переключатель энергии

See the Pen Blocky Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892

Реализация аккордеона на чистом CSS с использованием чекбоксов от Alex Bergin

Переключатель цены от Aniruddha Banerjee

See the Pen Pricing Card Design by Aniruddha Banerjee (@imanirudh1) on CodePen.0

Выбор группы иконок от Håvard Brynjulfsen

Использование переключателя для показа скрытого контента

Скрытый checkbox нужен для отображения блока с информацией, которая не видна изначально. Автор Lisi.

Сложные примеры

Оказывается, флажки (чекбоксы) можно стилизовать так, что пользователи вряд ли догадаются о том, что используют именно эти элементы.

Шестеренки в переключателе с анимацией

Флажок-выключатель

Отличная стилизация в виде выключателя с внутренней подсветкой от Yoav Kadosh.

Лампа-переключатель

Вариант попроще внешне от Jon Kantner, но в коде вы найдете очень меого правил.

Флажок-переключатель

Настоящий переключатель от Jon Kantner. Здесь использован не только CSS, но и JS-код.

Еще один вариант 3D-переключателя

3D-трансформации с анимацией

Глядя на этот пример, понимаешь, что стилизация переключателей — это наименьшее из того, что сделал автор Ivan Grozdic . Отличный вариант для туристического сайта в плане выбора услуг.

See the Pen Pricing — pure css — #16 by Ivan Grozdic (@ig_design) on CodePen.18892

Пример генератора пароля с использованием флажков

ToDo List (список дел) от Will Boyd

Интересно то, что при отметке чекбокса вы получаете список дел с подсчетом сделанных и несделанных заданий на основе только лишь CSS, совсем без JavaScript-кода, за счет использования свойства counter-increment и свойства order Flexbox-модели.

И еще один ToDo List от Daniel Ramos

Только CSS, без JavaScript

See the Pen To do List + CSS by Daniel Ramos (@DanielRamos) on CodePen.0

Бонус. Невключаемый чекбох

Для тех, кто дочитал до конца — бонус — чекбокс, который нельзя оставить включенным, так как вы рассердите мишку. Он даже рычать умеет и хмурить брови. Наслаждайтесь ))) Написано на React. Автор Jhey.

Источник