Использование и стилизация 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
Несмотря на то, что в последних версиях браузеров (как минимум самого популярного — Google Chrome) чекбоксы стали выглядеть симпатичнее, получили цвет и даже некоторую визуальную объемность, все равно для уникального дизайна их требуется кастомизировать. В этой статье мы научимся изменять внешний вид флажков с помощью обычного CSS.
Ефективний курс від robotdreams: Blockchain-розробник.
Революційні рішення в технологіях.
1. Простой пример
Для начала приведем самый простой пример кастомного чекбокса, буквально из нескольких строчек кода HTML:
и CSS #highload0 < opacity: 0; >#highload0 ~ label::before < #highload0 < opacity: 0; >#highload0 ~ label::before < content: '\2713'; text-align: center; color: white; line-height: 1em; width: 1em; height: 1em; border: 2px inset #000; border-radius: 0.25em; margin: 0.25em; display: inline-block; >#highload0:checked ~ label::before
Если посмотреть на внешний вид чекбокса, то обычный человек не увидит ничего необычного: цвет поменялся и все.
Інноваційний курс від robotdreams: Android Developer.
Творіть для мобільного світу.
Только вот проблема в том, что обычное свойство CSS color применительно к checkox’у не даст никакого видимого результата, поэтому даже для обычной его окраски приходится задействовать что-то из псевдоэлементов:
Освітній курс від robotdreams: Аналітик даних.
Перетворюйте дані на рішення.
Чаще всего применяются ::after и ::before. Как несложно догадаться из английского перевода названий, эти псевдо позволяют стилизовать определенные части родительского элемента, в данном случае это чекбокс.
Если вы хотите в дальнейшем развиваться во фронтенде, то не обходите стороной курсы наших партнеров от Mate Academy, Powercode, Robot Dreams. Они помогут выйти вам на новый более качественный профессиональный уровень.
2. Как осуществляется создание кастомного чекбокса или переключателя
Чекбокс (флажок) – это элемент, часто использующийся для графического пользовательского интерфейса (GUI). Необходим тогда, когда от посетителя сайта требуется сделать однозначный выбор – да или нет. Например, согласиться с пользовательским соглашением при регистрации.
Чекбоксы можно встретить не только в веб-приложениях, они существуют как отдельные элементы и в десктопных приложениях разных языков и сред программирования. Но сегодня мы рассмотрим именно HTML-версию чекбокса и исследуем, как его можно стилизовать, изменить внешний вид под свои нужды.
Стандарты HTML и CSS дают не так много возможностей для изменения внешнего вида чекбокса. С помощью стилей можно изменить его размер и цвет — по большому счету и все. Но нам этого мало, дизайнер в фигме или фотошопе создал уникальный флажок и теперь надо его как-то воплотить в код. Как это делается?
В большинстве случаев чекбоксы просто скрываются, поверх них накладывается другой элемент, меняющий свой внешний вид по клику мышкой. Сам же переключатель также хоть и скрыт, но тоже работает с событием (хоть визуально и не подает виду). А иногда и не работает; иногда состояние его полностью контролируется label с помощью, например, for.
3. Создание стильного чекбокса
Теория, надеюсь, более-менее ясна. Теперь давайте перейдем к коду и непосредственному созданию стильного чекбокса.
Стили: .lb1 < margin: 2em; >#highload1 < display: none; >#highload1+.lb1, #highload1+.lb1::before, #highload1+.lb1::after < transition: all .3s; >#highload1+.lb1 < display: inline-block; position: relative; width: 140px; height: 60px; border-radius: 30px; cursor: pointer; >#highload1+.lb1::before < display: block; content: attr(data-offlabel); position: absolute; top: 18px; right: 10px; color: black; font-family: 'Open Sans', sans-serif; font-size: 19px; >#highload1+.lb1::after < border-radius: 50%; content: ''; position: absolute; top: 3px; left: 3px; width: 54px; height: 54px; background-color: white; >#highload1:checked+.lb1::before < content: attr(data-onlabel); left: 16px; right: auto; color: #fff; >#highload1:checked+.lb1::after < left: 83px; background-color: #f7f7f7; >#highload1+.lb1 < background-color: #ccc; >#highload1:checked+.lb1 < background-color: green; >#highload1:checked+.lb1::before
Кода много, но пугаться не стоит — тут все очень просто. Скрываем инпут чекбокса, затем с помощью псевдоэлементов и в зависимости от состояния чекбокса меняем его внешний вид. Текст для разных состояний флажка мы берем из атрибутов data-onlabel и data-offlabel.
Атрибуты «data» обычно используются в JS, например, очень распространенная библиотека jQuery активно работает с ними, но, как видите из нашего примера, и в CSS можно также задействовать их.
Ефективний курс від mate.academy: Frontend.
Розблокуйте світ веб-розробки.
4. Еще примеры по кастомизации checkbox и label
Помимо приведенных выше примеров, есть и другие варианты реализации уникального внешнего вида такого элемента как чекбокс.
Несколько чекбоксов
Вот неплохой вариант:
Кастомные Checkbox-ы
Первый пункт Второй пункт Третий пункт
/* контейнер */ .container < display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; >/* скрываем дефолтный флажок */ .container .check-highload < position: absolute; opacity: 0; >/* Создаем кастомный checkbox */ .highload2 < position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; >/* При наведении указателя мыши перекрашиваем */ .container:hover .check-highload ~ .highload2 < background-color: #ccc; >/* Когда отмечен, то красим в зеленый цвет */ .container .check-highload:checked ~ .highload2 < background-color: green; >/* Создаем когда отмечено (не видно, когда не отмечено) */ .highload2:after < content: ""; position: absolute; display: none; >/* Показываем когда отмечен */ .container .check-highload:checked ~ .highload2:after < display: block; >/* Стили индикатора */ .container .highload2:after
В стилях выше есть небольшие комментарии, с помощью которых можно разобраться — где и что если потребуется, то вы можете изменить это под свои нужды, под стиль определенного сайта.
Еще вариант необычного внешнего вида checkbox на чистом CSS
Для отмеченного чекбокса (правило .highload-checkbox:checked + label:after) можно не только нарисовать круг как в примере, но и поставить галочку, эмоджи, либо вообще любой другой рисунок.
Флажок на JS
Все примеры в этом материале используют только связку HTML + CSS, то есть так называемый «чистый CSS». Но стоит знать, что для работы с флажками также можно довольно эффективно использовать JS.
Например, создать div , повесить на него событие:
не согласен
И немного стилей:
#myHighloadCheck < display:none; >#myHighload
Тут тоже все очень просто: по клику на div узнаем отмечен ли флажок и если отмечен, то задаем один цвет и текст диву, а если не отмечен, соответственно другие. И не забываем также изменить состояние у чекбокса на противоположное!
Подобный подход хоть и не часто, но все же встречается при создании сайтов. Узнать о всех подводных камнях фронтенда, вы можете посетив специальные курсы, где с вами будут обмениваться опытом практикующие специалисты.
5. Метод «Checkbox Hack»
В примерах выше мы фактически использовали так называемый «Checkbox Hack» — то есть задействовали другой элемент для управления checkbox’а вместо непосредственной работы с ним. Сам флажок скрыт и работаем мы с label , но данные на сервер отправляются именно такие, какие у инпута.
Пример разметки для понимания:
Test me
.test-me < color: black; /* состояние по умолчанию */ >#highload3:checked ~ .test-me < /* Отмеченное состояние! Без JavaScript!*/ color: red; >
Теперь, если мы кликнем по элементу label, то текст в диве с классом test-me изменит цвет с черного на красный. И все это без JS, на чистом CSS.
Таким образом, вы можете стилизовать элемент совершенно по-разному в зависимости от состояния этого флажка, который вы даже не видите. Довольно аккуратно. Давайте посмотрим на кучу вещей, которые может сделать «Checkbox Hack».
6. CSS свойство appearance для Checkbox
Свойство appearance (-webkit-appearance, -moz-appearance) из каскадных таблиц стилей со значением none убирает стандартное оформление элемента, но его возможности (включение-выключение, например) сохраняются, а это уже позволяет задать ему любые стили, не используя такие хаки. Пример:
#highload4 < appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 25px; background-color: red; border-radius:10%; >#highload4:checked < background-color: green; >#highload4:checked:before
Как выглядят отмеченный и не отмеченный флажки с такими стилями в браузере Google Chrome версии 98:
Обратите внимание, что это свойство является экспериментальным, а значит, его поддерживают далеко не все браузеры.
Заключение
Вот и все, после изучения примеров данной статьи вы сможете создавать чекбоксы какого угодно внешнего вида. Чаще всего для кастомизации используют галочки, либо же приводят визуально к похожести на включатели-выключатели — круглые, квадратные.
Напоследок стоит отметить, что все же не стоит увлекаться чрезмерным изменением внешнего вида любых элементов HTML-разметки. Пользователь должен все же понимать, что имеет дело именно с переключателем, а не пытаться угадать, что это такое диво дивное.
Также необходимо учитывать, чтобы чекбокс вписывался в общий дизайн, в общую идею сайта. Например, для веб-ресурса серьезной компании, выдержанного в черно-белых тонах, совсем не подойдет флажок в виде летящего дракона — клиенты вряд ли оценят. Но это уже дело дизайнеров и владельцев веб-ресурса, а не программистов и верстальщиков.
Стилизация флажков и переключателей с использованием CSS3
При создании CSS стилей для HTML форм, разработчики часто сталкиваются с невозможностью непосредственно менять внешний вид элементов флажков (checkboxes) и переключателей (radio buttons). Рассмотрим как можно обойти это ограничение при помощи инструментария CSS3 и без использования какого-либо кода JavaScript.
Итак, для начала добавим несколько обычных флажков и переключателей на форму:
/* Мои флажки */ /* Мои переключатели */ 
Перенесем стандартное отображение элементов за область видимости и добавим отступы к соседствующим меткам:
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 определения можно загрузить здесь.
CSS стилизация checkbox и radio — 2 варианта
Как осуществляется создание кастомного чекбокса или переключателя
Данный процесс осуществляется посредством скрытия стандартного элемента и создания с помощью CSS другого «поддельного», такого как мы хотим .
Но как же это будет работать, если стандартный input скрыть? Это можно выполнить благодаря тому, что в HTML переключить состояние checked можно не только с помощью самого элемента input , но и посредством связанного с ним label .
В HTML связывание label с input выполняется одним из 2 способов:
1. Посредством помещения элемента input в label :
2. Посредством задания элементу input атрибута id , а label – for с таким же значением как у id .
В этой статье мы подробно разберём шаги по кастомизации checkbox и radio , в которых label с input свяжем по 2 варианту. Создание «поддельного» чекбокса выполним с использованием псевдоэлемента ::before , который поместим в label . При этом никакие дополнительные элементы в разметку добавлять не будем.
Создание стильного чекбокса
Процесс замены стандартного вида чекбокса на кастомный осуществим посредством выполнения следующей последовательности шагов.
Шаг 1. Создадим разметку.
При создании разметки очень важно соблюдать последовательность расположения элементов. Это необходимо, потому что в зависимости от того, как они расположены мы будем составлять выражения для выбора элементов в 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» :
Ещё примеры по кастомизации checkbox и label
В этом разделе представлены следующие примеры:
- оформление чекбокса, когда input расположен в label
- оформление переключателя, когда input расположен в label
1. Стилизация checkbox, когда input расположен в label .
/* для элемента 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 .
/* для элемента 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; }