Использование и стилизация input checkbox
В данной статье мы поговорим об использовании и стилизации элементов checkbox(далее чекбоксов) на вашем сайте. При верстке сайта разработчики сталкиваются с проблемой стилизации чекбоксов, многие так же используют их не там где надо. Давайте познакомимся с этим элементов поближе.
Что такое чекбокс?
Checkbox с английского переводится как «флажок». Это элемент пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ отключено. В включенном состоянии внутри чекбокса отображается галочка ✓, иногда можно использовать крестик. По традиции чекбокс имеет квадратную форму.
В html формах для вывода чекбокса используется код:
Применение чекбоксов
- для выбора элементов из списка. Например, выбор массового действия.
- Для выбора параметров. Например, включение уведомлений.
- Подтверждение действий. Например, согласие на обработку персональных данных.
Чекбокс не запускает действие сразу. Для этого, обычно, необходимо нажать на кнопку. Для включение какого-либо режима сразу рекомендуется использование тугла(toogle):
Некоторые разработчики неправильно применяют чекбоксы в интерфейсе. Например, при выборе из нескольких параметров следует использовать тип radio:
Создание стандартных чекбоксов
Ниже продемонстрирован пример создания стандартных чекбоксов.
See the Pen Untitled by Токмаков Александр (@calliko) on CodePen.
Стилизация чекбоксов
Чекбоксы можно стилизовать под ваши нужды. Ниже приведен пример стилизации чекбоксов с помощью css, без использования js
See the Pen checkbox style by Токмаков Александр (@calliko) on CodePen.
Пример тугла (переключателя):
See the Pen toggle by Токмаков Александр (@calliko) on CodePen.
Данные переключатели советую использовать когда необходимо выполнить действие моментально. Например, включение темного режима сайта.
Советы по использованию чекбоксов
- Используйте стандартный вид чекбокса. Пользователи привыкли к квадратной форме чекбоксов и галочкам внутри них. Сделав их круглыми, вы можете запутать пользователей. Если использовать крестик, то тоже не понятно выбор сделан или наоборот — отмена.
- Располагайте чекбоксы правильно. Лучший вариант в столбик друг под другом. Иногда можно их ставить в ряд, но нижние чекбоксы должны быть строго друг под другом.
- Используйте понятные утвердительные подписи к чекбоксам. Избегайте отрицательных подписей, например, «Не присылать мне подписку».
- Не делайте размер чекбокса слишком маленьким или слишком большим.
А ещё у нас есть статья о стилизации select. Спасибо за внимание!
Стилизация чекбоксов и радиокнопок на чистом CSS с совместимостью для старых браузеров
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью для старых браузеров (т.е. не в ущерб юзабилити), которые не поддерживают современные CSS-правила. Другими словами — в современных браузерах чекбоксы и радиокнопки будут выглядеть красиво, в соответствии с задуманным дизайном, а в старых (это относится к Internet Explorer версии 8 и ниже) они останутся с оформлением «по умолчанию», характерным для каждой конкретной операционной системы. Кроме того, сохраняется возможность HTML5-валидации стилизуемых элементов (чего может не быть при использовании JavaScript-плагинов). В современных браузерах ее поддержка — уже давно норма.
Важные особенности
- Кроме, собственно, самого тега элемента, который мы хотим красиво оформить ( или ), понадобится тег , благодаря которому переключать элемент можно, кликая на текст, а не только на сам элемент.
- Тег должен находиться до тега (в этом случае состояние элемента формы переключается с помощью атрибута 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)
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок ; переключатель ; поле для выбора файла . поле для ввода чисел . раскрывающийся список ; Демонстрация .
Верстка красивых тегов для сайта + бонус
Замечательный дизайнер Orman Clark однажды представил своим читателям очень красивый дизайн облака тегов, который я использовал на одном моем сайте. Расскажу, как сверстать такие теги для вашего сайта. Для начала необходимо приготовить .
Зеленый свет CSS-свойствам при верстке под IE8 и выше
Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. .
jQuery-плагин для стилизации input[type=»radio»]
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин .
Стилизация флажков (чекбоксов) в CSS
Наверняка вы задумались о том, как можно изменить стандартный вид флажков (чекбоксов), чтобы они выглядели привлекательней с учетом дизайна вашего сайта или задач одной конкретной страницы. В этой статье вы найдете ряд практических примеров, которые помогут вам стилизовать элементы . Для начала разберем пример, который имеет вид переключателя. Давайте посмотрим, как можно стилизовать флажки на примере, который в html-разметке содержит только и :
HTML-разметка
Сам пример в действии:
Теперь рассмотрим CSS-стили:
Стили для флажков (чекбоксов)
input+label,
input+label::before,
input+label::after <
-webkit-transition : all .2s ;
transition : all .2s ;
input+label <
display : inline-block ;
position : relative ;
width : 130px ;
height : 50px ;
border-radius : 25px ;
cursor : pointer ;
input+label::before <
display : block ;
content : attr ( data-off-label ) ;
position : absolute ;
right : 10px ;
color : #fff ;
font-family : Arial, sans-serif ;
font-size : 18px ;
input+label::after <
position : absolute ;
width : 44px ;
height : 44px ;
background-color : #fff ;
border-radius : 50% ;
input:checked+label::before <
content : attr ( data-on-label ) ;
left : 14px ;
right : auto ;
color : #fff ;
input:checked+label::after <
left : 83px ;
background-color : #f7f7f7 ;
#demo1+label < background-color : #ccc ; >
#demo1+label::before < color : #999 ; >
#demo1:checked+label < background-color : #3498db ; >
#demo1:checked+label::before < color : #fff ; >
#demo2+label < background-color : #e74c3c ; >
#demo2:checked+label < background-color : #1abc9c ; >
Если проанализировать код 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
Иконки-переключатели от Braydon Coyer
Анимированное переключение состояний флажка в виде пилюли
Круглая кнопка с анимацией от mandycodestoo
See the Pen 100dayscss-66 by @mandycodestoo (@mandycodestoo) on CodePen.18892
Перетекающий переключатель от Nicolas Jesenberger
Анимация текста флажков и радио-кнопок от Raúl Barrera
Еще один пример от Nicolas Jesenberger
Подсветка текста label + анимация выбора чекбокса от Adam Quinlan
See the Pen chippy checkbox inputs by Adam Quinlan (@quinlo) on CodePen.18892
Переключатель темы/погоды от Jon Kantner
Анимация флажков с переворотом
Анимация флажков и переключателей в стиле Material Design от Matt Sisto
Перекатывающийся шарик от Jon Kantner
Вариант 1
See the Pen Toy Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892
Вариант 2 со скрепкой
Объемный переключатель от того же автора
Карандаш для отметки выбора флажка
Еще один вариант анимации от Jon Kantner, но с появлением карандаша. Отличное решение для тестов, например.
Меняем цветовую схему переключателем
Автор Jon Kantner предлагает вашему вниманию вариант кода, при котором клик на чекбоксе меняет цвет фона.
Вариант 1
Вариант 2
Вариант 3
Переключатель энергии
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
Множественный выбор из группы от Jon Kantner
Использование переключателя для показа скрытого контента
Скрытый checkbox нужен для отображения блока с информацией, которая не видна изначально. Автор Lisi.
Сложные примеры
Оказывается, флажки (чекбоксы) можно стилизовать так, что пользователи вряд ли догадаются о том, что используют именно эти элементы.
Шестеренки в переключателе с анимацией
Флажок-выключатель
Отличная стилизация в виде выключателя с внутренней подсветкой от Yoav Kadosh.
Лампа-переключатель
Вариант попроще внешне от Jon Kantner, но в коде вы найдете очень меого правил.
Флажок-переключатель
Настоящий переключатель от Jon Kantner. Здесь использован не только CSS, но и JS-код.
Еще несколько вариантов 3D-переключателей
See the Pen 3D Tilt Toggle by Jon Kantner (@jkantner) on CodePen.0
Светлый и темный вариант
See the Pen Rocker Switches by Jon Kantner (@jkantner) on CodePen.0
See the Pen Skillet Switch by Jon Kantner (@jkantner) on CodePen.0
Переключатель цены
Тянет на полноценную страницу. Автор Ivan Grozdic
See the Pen Pricing by Ivan Grozdic (@ig_design) on CodePen.0
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.
CSS стили для Checkbox
В каждом проекте приходится стилизовать Checkbox, поэтому написал несколько стилей для применения в разных макетах.
Все примеры можно посмотреть на codepen
HTML разметка для примера:
Style A — Родительская label обертка с классом checkbox и классом стилей style-a , используется для того, чтобы активная область была на всех внутренних элементах, то есть можно нажимать не только на сам checkbox, но и на область описания checkbox
— обязательный скрытый input для определения состояния checkbox
— область отметки checkbox
Отметка добавляется через псевдо-элемент :after относительно
— область для описания checkbox, может быть текстом, изображением, элементом и так далее
Небольшое отступление для понимания:
Селектор ~ (тильда) выбирает соседние элементы, находящиеся на том же уровне, но после выбранного элемента
Проще всего понять на примере:
/* Верно */ input ~ .checkbox__checkmark <> /* выбирает .checkbox__checkmark */ input ~ .checkbox__body <> /* выбирает .checkbox__body */ .checkbox__checkmark ~ .checkbox__body <> /* выбирает .checkbox__body */ /* Не верно */ .checkbox__checkmark ~ input <> /* выше расположеный input НЕ БУДЕТ выбран */ .checkbox__body ~ .checkbox__checkmark <> /* выше расположеный .checkbox__checkmark НЕ БУДЕТ выбран */ Также для более логичного поведения при установке размеров элементов использую box-sizing: border-box; для все элементов
*, *::before, *::after
Если в проекте не используете box-sizing: border-box; , то можно установить это свойство только для стилизованного checkbox
/* Для самого блока .checkbox */ .checkbox, .checkbox::before, .checkbox::after < box-sizing: border-box; >/* И для его дочерних элементов */ .checkbox *, .checkbox *::before, .checkbox *::after
Иначе возможны различия с примерами во внешнем виде
Описание стилей
Style A
.checkbox.style-a < display: inline-block; position: relative; padding-left: 25px; /* Так как .checkbox__checkmark имеет position: absolute; оставляем для него свободное место */ cursor: pointer; user-select: none; >/* Скрываем стандарный input */ .checkbox.style-a input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >/* Если input отмечен(:checked), то .checkbox__checkmark(область отметки), применяет данные стили */ .checkbox.style-a input:checked ~ .checkbox__checkmark < background-color: #fff; >/* Если input отмечен(:checked), то псевдо-элемент .checkbox__checkmark:after(отметка-галочка), применяет данные стили */ .checkbox.style-a input:checked ~ .checkbox__checkmark:after < opacity: 1; /* отображаем отметку-галочку */ >/* При наведении(:hover) на всю область checkbox элемент .checkbox__checkmark(область отметки) применяет данные стили*/ .checkbox.style-a:hover input ~ .checkbox__checkmark < background-color: #eee; /* окрашиваем фон в серый цвет*/ >/* При наведении(:hover) на всю область checkbox и при отмеченном input элемент .checkbox__checkmark(область отметки) применяет данные стили*/ .checkbox.style-a:hover input:checked ~ .checkbox__checkmark < background-color: #fff; /* окрашиваем фон в белый цвет*/ >/* Исходные стили для области отметки .checkbox__checkmark */ .checkbox.style-a .checkbox__checkmark < position: absolute; top: 4px; left: 0; height: 16px; width: 16px; background-color: #fff; border: 1px solid #333; transition: background-color 0.25s ease; border-radius: 3px; >/* Исходные стили для отметки .checkbox__checkmark:after */ .checkbox.style-a .checkbox__checkmark:after < content: ""; position: absolute; left: 5px; top: 1px; width: 5px; /* ширина - длина левой линии отметки-галочки */ height: 10px; /* высота - длина правой линии отметки-галочки */ border: solid #333; /* рамка(border) сплошной линией цвета #333 */ border-width: 0 1px 1px 0; /* правая и нижняя рамка(border) по 1px */ transform: rotate(45deg); /* блок наклонен по часовой стрелке на 45 градусов */ opacity: 0; /* изначально скрыта */ transition: opacity 0.25s ease; /* для плавного появления, скрытия, перемещения отметки*/ >/* Исходные стили для области описания .checkbox__body*/ .checkbox.style-a .checkbox__body
Остальные стили
Style B
.checkbox.style-b < display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-b input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-b input:checked ~ .checkbox__checkmark < background-color: #fff; >.checkbox.style-b input:checked ~ .checkbox__checkmark:after < opacity: 1; >.checkbox.style-b:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-b:hover input:checked ~ .checkbox__checkmark < background-color: #fff; >.checkbox.style-b .checkbox__checkmark < position: absolute; top: 3px; left: 0; height: 18px; width: 18px; background-color: #fff; border: 2px solid #333; transition: background-color 0.25s ease; border-radius: 4px; >.checkbox.style-b .checkbox__checkmark:after < content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease; >.checkbox.style-b .checkbox__body
Style C
.checkbox.style-c < display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-c input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-c input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-c input:checked ~ .checkbox__checkmark:after < opacity: 1; >.checkbox.style-c:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-c:hover input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-c .checkbox__checkmark < position: absolute; top: 2px; left: 0; height: 20px; width: 20px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 4px; >.checkbox.style-c .checkbox__checkmark:after < content: ""; position: absolute; left: 8px; top: 4px; width: 5px; height: 10px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease; >.checkbox.style-c .checkbox__body
Style D
.checkbox.style-d < display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-d input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-d input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-d input:checked ~ .checkbox__checkmark:after < opacity: 1; >.checkbox.style-d:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-d:hover input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-d:hover input ~ .checkbox__body < color: #f7cb15; >.checkbox.style-d .checkbox__checkmark < position: absolute; top: 1px; left: 0; height: 22px; width: 22px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 11px; >.checkbox.style-d .checkbox__checkmark:after < content: ""; position: absolute; left: 9px; top: 5px; width: 5px; height: 10px; border: solid #333; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease; >.checkbox.style-d .checkbox__body
Style E
.checkbox.style-e < display: inline-block; position: relative; padding-left: 50px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-e input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-e input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-e input:checked ~ .checkbox__checkmark:after < left: 21px; >.checkbox.style-e:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-e:hover input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-e .checkbox__checkmark < position: absolute; top: 1px; left: 0; height: 22px; width: 40px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 11px; >.checkbox.style-e .checkbox__checkmark:after < content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; display: block; background-color: #fff; border-radius: 50%; transition: left 0.25s ease; >.checkbox.style-e .checkbox__body
Style F
.checkbox.style-f < display: inline-block; position: relative; padding-left: 30px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-f input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-f input:checked ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-f input:checked ~ .checkbox__checkmark:after < transform: scale(1); >.checkbox.style-f input:checked ~ .checkbox__body < font-weight: bold; >.checkbox.style-f:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-f:hover input:checked ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-f .checkbox__checkmark < position: absolute; top: 1px; left: 0; height: 22px; width: 22px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 11px; >.checkbox.style-f .checkbox__checkmark:after < content: ""; position: absolute; left: 0px; top: 0px; width: 22px; height: 22px; display: block; background-color: #f7cb15; border-radius: 50%; transform: scale(0); transition: transform 0.25s ease; >.checkbox.style-f .checkbox__body
Style G
.checkbox.style-g < display: inline-block; position: relative; padding-right: 40px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-g input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-g input:checked ~ .checkbox__checkmark < background-color: #fff; >.checkbox.style-g input:checked ~ .checkbox__checkmark:after < opacity: 1; left: 8px; >.checkbox.style-g input:checked ~ .checkbox__body < font-weight: bold; >.checkbox.style-g:hover input ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-g:hover input:checked ~ .checkbox__checkmark < background-color: #eee; >.checkbox.style-g .checkbox__checkmark < position: absolute; top: 1px; right: 0; height: 22px; width: 22px; background-color: #eee; transition: background-color 0.25s ease; border-radius: 4px; >.checkbox.style-g .checkbox__checkmark:after < content: ""; position: absolute; left: -20px; top: -8px; width: 15px; height: 25px; border: solid #f7cb15; border-width: 0 4px 4px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease, left 0.25s ease; >.checkbox.style-g .checkbox__body
Style H
.checkbox.style-h < display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >.checkbox.style-h input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-h input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-h input:checked ~ .checkbox__checkmark:after < opacity: 1; top: -3px; >.checkbox.style-h input:checked ~ .checkbox__body < background-position: 0 0; color: #fff; >.checkbox.style-h:hover input ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-h:hover input:checked ~ .checkbox__checkmark < background-color: #f7cb15; >.checkbox.style-h:hover .checkbox__body < box-shadow: 5px 5px 10px rgba(0,0,0,0.2); >.checkbox.style-h .checkbox__checkmark < position: absolute; top: 50%; transform: translateY(-50%); left: 15px; height: 22px; width: 22px; background-color: #f7cb15; transition: background-color 0.25s ease; border-radius: 4px; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1), inset -2px -2px 4px rgba(255,255,255,0.4); >.checkbox.style-h .checkbox__checkmark:after < content: ""; position: absolute; left: 10px; top: -15px; width: 10px; height: 20px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.25s ease, top 0.25s ease; >.checkbox.style-h .checkbox__body
Style I
.checkbox.style-i < display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding-left: 65px; >.checkbox.style-i input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; >.checkbox.style-i input:checked ~ .checkbox__checkmark < background-color: #49db44; >.checkbox.style-i input:checked ~ .checkbox__checkmark:after < transform: rotate(90deg) translateY(-50%) translateX(-50%); background-color: #49db44; >.checkbox.style-i .checkbox__checkmark < position: absolute; top: 0; left: 0; height: 50px; width: 50px; background-color: #ff0070; transition: background-color 0.25s ease; border-radius: 50%; >.checkbox.style-i .checkbox__checkmark:after < content: ""; position: absolute; left: 50%; top: 50%; width: 80%; height: 12px; border-radius: 6px; transform: rotate(0deg) translateY(-50%) translateX(-50%); transform-origin: left top; background-color: #ff0070; transition: transform 0.25s ease, background-color 0.25s ease; box-shadow: 2px 2px 4px rgba(0,0,0,0.2), -2px -2px 4px rgba(255,255,255,0.6); >.checkbox.style-i .checkbox__body