Стилизация флажков (чекбоксов) в CSS
Несмотря на то, что в последних версиях браузеров (как минимум самого популярного — Google Chrome) чекбоксы стали выглядеть симпатичнее, получили цвет и даже некоторую визуальную объемность, все равно для уникального дизайна их требуется кастомизировать. В этой статье мы научимся изменять внешний вид флажков с помощью обычного CSS.
Курс Аналітик даних.
Протягом 4 місяців ви вивчите повний набір інструментів для аналізу даних та отримаєте можливість працевлаштування в Laba Group.
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
Если посмотреть на внешний вид чекбокса, то обычный человек не увидит ничего необычного: цвет поменялся и все.
Курс Управління командою в бізнесі.
Онлайн-курс для ефективного управління командою, спрямований на створення проактивних та самостійних команд, де мікроменеджмент не потрібний.
Только вот проблема в том, что обычное свойство CSS color применительно к checkox’у не даст никакого видимого результата, поэтому даже для обычной его окраски приходится задействовать что-то из псевдоэлементов:
Курс Финансовый директор.
Отримайте комплексне розуміння фінансової діяльності. Час підніматись по карʼєрним сходам.
Чаще всего применяются ::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 можно также задействовать их.
Курс UI/UX для геймдеву.
Під час навчання ви розробите проекти для портфоліо, що складається з 5 ключових аспектів UX/UI-дизайну, та отримаєш необхідні навички для професійного росту.
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-разметки. Пользователь должен все же понимать, что имеет дело именно с переключателем, а не пытаться угадать, что это такое диво дивное.
Также необходимо учитывать, чтобы чекбокс вписывался в общий дизайн, в общую идею сайта. Например, для веб-ресурса серьезной компании, выдержанного в черно-белых тонах, совсем не подойдет флажок в виде летящего дракона — клиенты вряд ли оценят. Но это уже дело дизайнеров и владельцев веб-ресурса, а не программистов и верстальщиков.
Как изменить галочку в checkbox css
В каждом проекте приходится стилизовать Checkbox, поэтому написал несколько стилей для применения в разных макетах.
Все примеры можно посмотреть на codepen
HTML разметка для примера:
— Родительская label обертка с классом checkbox и классом стилей style-a , используется для того, чтобы активная область была на всех внутренних элементах, то есть можно нажимать не только на сам checkbox, но и на область описания checkbox
— обязательный скрытый input для определения состояния checkbox
— область отметки checkbox
Отметка добавляется через псевдо-элемент :after относительно
— область для описания checkbox, может быть текстом, изображением, элементом и так далее
Небольшое отступление для понимания:
(тильда) выбирает соседние элементы, находящиеся на том же уровне, но после выбранного элемента
Проще всего понять на примере:
Также для более логичного поведения при установке размеров элементов использую box-sizing: border-box; для все элементов
Если в проекте не используете box-sizing: border-box; , то можно установить это свойство только для стилизованного checkbox
Делаем красивые чекбоксы с анимацией
Мы уже много говорили о базовом CSS, немного о препроцессорах, современных командах и гридах. Теперь посмотрим на вложенности и зависимости — полезный инструмент для веб-разработки в реальном мире.
Основой нашего кода станет вот этот кусок, в частности — знак плюса:
.checkbox__input:checked + .checkbox__icon .tick
Плюс означает, что стиль применяется к элементам класса .checkbox__icon .tick , которые идут в HTML-коде сразу после отмеченного элемента checkbox__input .
Также в коде будет использоваться такое заклинание:
Но его так запросто не объяснишь, листайте дальше.
Что делаем
Допустим, мы делаем интерфейс интернет-пиццерии и хотим добавить конфигуратор начинки. Нам нужно, чтобы пользователь мог поставить галочки возле ингредиентов. При этом важно, чтобы всё выглядело красиво (а не как в стандартном исполнении браузера).
Классический дизайн чекбоксов
Если мы сделаем это просто на чекбоксах, мы получим мелкие и едва кликабельные штучки. Вот их сейчас мы будем прокачивать, чтобы они были крупными и анимированными:
Подключаем нормализатор и файл со стилями
Чтобы чекбоксы выглядели одинаково во всех браузерах, начнём с нормализатора CSS. Это специальный набор стилей, который приводит содержимое нашей страницы к единому виду в каждом браузере.
Подключается нормализатор так:
Заодно сразу подключим файл со стилями. Он пока пустой:
Меняем внешний вид чекбокса
Чтобы сделать анимацию отмечания галочки, мы пойдём на хитрость: отрисуем все элементы вручную с помощью SVG-графики и потом используем её для анимации.
Для этого мы поступим так:
- Используем тег , чтобы потом можно было подписать чекбокс, и сразу напишем id элемента, который нужно будет подписать. Этим элементом станет чекбокс.
- Внутри этого тега разместим тег , который создаст нам чекбокс.
- Укажем для чекбокса стиль, чтобы настроить его внешний вид, и id, чтобы подпись поняла, к чему именно она относится.
- Ниже добавим SVG-область, в которой нарисуем сразу рамку и галочку.
- Рамка будет видимой сразу, а видимостью галочки мы будем управлять через стили.
- Добавим саму подпись чекбокса в теге .
Видно, что у нас появился новый дизайн чекбокса и галочки, но сломались размеры. Всё дело в том, что мы не настроили стили для этих элементов. Добавим это в файл style.css — читайте комментарии, если что-то будет непонятно:
Стало лучше, появился новый красивый чекбокс, но галочку в него поставить пока нельзя — мы не настроили стили для этого. Исправим это, добавив новые стили в файл:
�� Обратите внимание на плюс в этой записи. Он означает, что этот стиль применяется к элементам класса .checkbox__icon .tick , которые идут в HTML-коде сразу после отмеченного элемента checkbox__input . Если между элементами с этими классами вставить какой-то другой тег, то ничего не сработает. Такой подход позволяет тонко управлять поведением элементов на странице.
Добавляем остальные чекбоксы
Теперь, когда мы научились ставить красивые чекбоксы с анимированными галочками, вернёмся в HTML-код и добавим остальные варианты для пиццы. Делаем это простым копированием и вставкой. Единственное, что нужно не забыть поменять, — числа в id у чекбоксов:
Теперь у нас есть все нужные чекбоксы, только они стоят в ряд, а нам хорошо бы их сделать друг под другом. А ещё у нас до сих пор нет автоподсчёта отмеченных галочек.
Объединяем чекбоксы
Самый простой способ что-то объединить в HTML — использовать тег . Объединим наши чекбоксы с помощью него и зададим отдельный класс для оформления:
А теперь пропишем стили в CSS-файле:
Самая магия происходит в строке .check-group > * + * , и вот что она означает:
- Символ «больше» означает, что правило будет относиться к каким-то элементам, которые лежат внутри тега с классом .check-group.
- Звёздочка означает, что это правило относится ко всем элементам, которые лежат внутри.
- Плюс означает, что предыдущее правило применяется, только если предыдущий (то есть любой вложенный) и следующий (то есть тоже любой вложенный) элементы идут друг за другом.
- Вторая звёздочка означает, что следующий элемент тоже может быть любым.
Если перевести это всё с айтишного на русский, то будет звучать примерно так:
«Отодвинь все вложенные элементы друг от друга на такое-то расстояние. От верха с низом не отодвигай, потому для них это правило не работает».
Ради интереса можете удалить плюс и вторую звёздочку и посмотреть, как изменится внешний вид группы.
Считаем количество отмеченных галочек
Если вы смотрели CSS-код из предыдущего этапа, то обратили внимание на счётчики, которые мы задаём прямо в CSS. Современный CSS получил поддержку таких мини-переменных, которые могут считать количество отображённых элементов.
Чтобы увеличить значение счётчика на единицу, используют команду counter-increment. Используем её, чтобы посчитать сначала количество всех чекбоксов:
А потом считаем количество отмеченных галочек:
Последнее, что нам осталось сделать, — вывести на экран итоговое количество выбранных добавок.
Добавляем вывод с результатами
Чтобы вывести строку с результатом, внутри общего блока в самом конце разместим строку:
Теперь нам нужно научить станицу правильно заполнять её содержимое. Для этого используем два стиля — просто для блока с этой надписью, чтобы она выглядела солидно, и второй стиль с псевдоклассом :after, который сработает после отрисовки остальных стилей:
Мы получили анимацию и динамическое управление контентом на странице средствами CSS. Пока что это не слишком функционально, потому что мы не отправляем эти данные никуда на сервер и не берём с клиента деньги за пиццу, но зато CSS. Есть чем гордиться ��
Кастомное оформление checkbox и radio кнопок средствами CSS
Для раскрытия основной темы этой статьи в первую очередь следует раскрыть понятие checkbox и radio для понимания того, с чем нам надо будет столкнуться при кастомизации.
Checkbox – составляющая часть интерфейса веб-ресурса, вывод которой осуществляется графическим методом. Существует два возможных состояния элемента: выбрано (означает согласие с указанным тезисом или подтверждает предпочтение пользователя к указанному объекту) и не выбрано (передает не согласие и не желание взаимодействия человека с указанными параметрами).
Область взаимодействия пользователя и checkbox традиционно представляется в виде пустого квадрата. При выборе указанного параметра (средством выбора является клик мышкой по активной зоне) квадратик заполняется определенным маркером. Классический вариант этого маркера – галочка. Около флажка указывается информация для выбора, в ее качестве может выступать текст, реже – картинка.
Radio — составляющая часть интерфейса веб-ресурса, которая передает выбор пользователя одного значения из общего множества предложенных вариантов.
По сути функционал radio не отличается от checkbox. Единственным и главным отличием этих элементов является то, что checkbox позволяет выбрать несколько параметров одновременно из списка предложенных, а radio допускает отмечать только один вариант.
Процесс кастомизации
Суть кастомизации заключается в преобразовании указанного оформления под свой уникальный стиль. Для не опытных верстальщиков этот процесс вызывает множество вопросов и трудностей. Однако сегодня мы покажем, как грамотно переоформить элементы выбора checkbox и radio без использования Java-script кода.
Необходимость в использовании кастомизации переключателей и флажков вызвана с одной стороны особенностями работы браузеров, которые по умолчанию отображают эти элементы по разному, в соответствии со своими стандартными настройкам. Пример отображение одного и того же кода в Chrome и FireFox представлен ниже.
До кастомизации
После кастомизации
С другой стороны это используется для создания единства стиля сайта, приведения всего оформления ресурса к общему знаменателю.
Пример переработки стандартного оформления в необходимый Вам вид рассмотрен ниже.
Стилизуем checkbox css
Сегодня мы научимся изменять внешний вид наших чекбоксов только с помощью css. Тема это довольно популярная, но в большинстве решений используются jQuery плагины. В принципе, в этом нет необходимости. Сейчас мы в этом убедимся.
Для начала создадим обычный чекбокс (разметка):
Здесь чекбокс и текст для него. Все это обернуто в div. Это сделано специально и нужно! Кстати, кто не знал: for у тега label должен соответствовать нужному id чекбокса, чтобы при клике по тексту выбирался чекбокс.
Теперь перейдем к стилям:
Здесь все мега просто:) Использование псевдоэлемента after и состояние чекбокса :checked позволяет добиться желаемого результата. Логика: скрываем настоящий чекбокс. У описания для нужного чекбокса показываем псевдоэлемент и стилизуем его как угодно. При клике по описанию — чекбоксу присваивается свойство (чекнутый) и мы выражением input[type=checkbox]:checked + label:after меняем вид псевдоэлемента на нужный. Profit!
Похожие публикации:
- Как изменить цвет фона в css
- Как использовать node js
- Как установить шрифты css
- Какая версия node js для windows 7
Как создавать и стилизовать чекбоксы: подробный гайд
Чекбокс — это компонент ввода на сайте, который обычно выглядит как пустой квадрат в невыбранном состоянии, а если его выбирают, то он меняет вид — в квадрате появляется галочка.
Курс Python basic.
Після курсу ви зможете впевнено працювати з чатботами, скриптами, вбудованими системами, веб- та мобільними застосунками, а також навіть ігровими програмами.
Чекбоксы можно найти на любом сайте в интернете. Их используют, когда нужно выбрать ответ на вопрос из нескольких вариантов или чтобы отметить больше одного ответа.
Вы можете увидеть этот компонент, когда вам предлагают оформить подписку на рассылку новостей на сайте или просят прочитать и согласиться с политикой конфиденциальности.
В отличие от тех же радиокнопок, которые позволяют выбрать только один ответ, чекбоксы могут «включать» и «выключать» разные значения.
Иногда чекбоксы на сайте отмечены по умолчанию. Например, для регистрации пользователю обязательно нужно согласиться с обработкой персональных данных. В этом случае галочка уже может стоять в поле, чтобы дать понять, что это условие обязательно для регистрации на сайте.
Курс Финансовый директор.
Отримайте комплексне розуміння фінансової діяльності. Час підніматись по карʼєрним сходам.
В этой статье мы разберем, как создать чекбоксы и как настроить стиль, разметку и цвета с помощью HTML и CSS.
Атрибуты чекбокса
Синтаксис чекбокса в HTML выглядит очень просто:
Он обычно содержит несколько атрибутов:
-
name — устанавливает имя чекбокса;
Например, при регистрации на сайте вы спрашиваете, откуда пользователь узнал о вашей компании. В этом случае атрибут name каждого входного элемента может быть source . А value одного из чекбоксов будет, например, Instagram. В этом случае данные, отправленные на сервер, будут выглядеть следующим образом: source = instagram .
Как создать стильный чекбокс
По умолчанию
Если мы пользуемся только HTML и не настраиваем стили при помощи CSS, то стиль чекбокса по умолчанию выглядит вот так:
Стиль по умолчанию
HTML-код такого чекбокса выглядит довольно просто:
По сути, кроме указания вам не нужно ничего делать.
Курс С++ для GameDevData analyst.
Комплексний курс, який навчить кодити на C++ з нуля, отримай необхідні навички щоб заволодіти затребуваною мовою програмування.
Чекбокс с галочкой
Но если вы хотите, чтобы этот вариант ответа был уже выбран при открытии сайта, то необходимо будет добавить атрибут checked . Нужно прописать это в HTML:
Тогда мы получим чекбокс с галочкой:
Чекбокс с галочкой
Обязательный чекбокс
Используя другой атрибут, можно прописать в коде обязательный чекбокс. Это значит, что пользователь не сможет отправить форму, пока не отметит нужный чекбокс. Этот атрибут часто используется, если нужно принять какие-либо условия.
Чтобы установить такой чекбокс, в строку ввода нужно добавить дополнительный атрибут:
И если пользователь не поставил галочку и пытается отправить форму, то у него не получится это сделать. Всплывет окно с подсказкой:
Кастомный чекбокс
Теперь перейдем к настройке кастомного чекбокса. На самом деле стилизовать сам чекбокс очень проблематично. Но существует простой трюк, который позволит вам использовать любой элемент, который вы хотите.
В чем суть трюка? Мы спрячем окошко для галочки и создадим вместо него поддельный чекбокс, который и будем настраивать с помощью CSS.
Скрываем чекбокс: способ первый
Чтобы скрыть чекбокс, нужно прописать одну строчку кода в разделе head . Когда вы работаете со стилями CSS, напишите:
Курс Python basic.
Після курсу ви зможете впевнено працювати з чатботами, скриптами, вбудованими системами, веб- та мобільними застосунками, а також навіть ігровими програмами.
И квадрат с галочкой исчезнет:
Квадрата с галочкой нет
Теперь наш чекбокс выглядит как простой текст, но на самом деле в структуре кода видно, что окно с галочкой просто не отображается у пользователя на экране:
Custom Toggle Button | CodingLab input[type=checkbox]
Скрываем чекбокс: способ второй
Также можно воспользоваться вторым вариантом, чтобы спрятать чекбокс. Для этого нужно установить стиль элемента ввода, а затем спрятать его, установив opacity: 0 . Так текст не будет съезжать к левому краю и накладываться на наш чекбокс:
/*Стиль метки, содержащей элемент ввода*/ .container < display: block; position: relative; padding-left: 24px; margin-bottom: 12px; cursor: pointer; user-select: none; >/* Прячем чекбокс */ .container input < position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;
Вот что получится:
Текст больше не съезжает
Настройка стиля: закруглим края и добавим цвет
Теперь можно приступать к настройке своего собственного стиля чекбокса. Например, можно сделать окошко для галочки с закругленными краями, прописав:
Если вы хотите, чтобы чекбокс выделялся на фоне черного текста, то настройте собственную цветовую палитру. Можно менять как цвет обводки, так и фона внутри. Для этого впишите код желаемого цвета, например:
И установите стиль границ:
border: 2px solid #33475B
Так у нас получился серо-синий цвет чекбокса:
Добавляем фон
Чтобы настроить собственное отображение выбранного чекбокса, на галочки и фон нужно потратить чуть больше времени. Придется вручную прописать стиль, позицию и настройки отображения галочки. Мы создали собственный чекбокс, который выглядит так:
Чтобы сделать такой простой стиль, необходимо написать несколько строк кода:
/* Устанавливаем галочку (она будет скрыта, если не отмечена) */ .checkmark:after < content: ""; position: absolute; display: none; >/* Показывать галочку при выбранном ответе */ .container input:checked ~ .checkmark:after < display: block; >/* Стилизуем галочку */ .container .checkmark:after
Мы разобрали основные способы кастомизации чекбоксов, но это далеко не все, что можно сделать с HTML и CSS. Например, можно настроить разные виды чекбокса для состояний hover , active , focus и disabled .
Кроме того, можно даже создавать сложные чекбоксы с анимацией. Если вы хотите посмотреть, как выглядят анимированные чекбоксы, то загляните в статью Custom HTML and CSS Checkbox Examples You Can Use Too.
Чекбоксы в виде кнопок
В продолжении статьи о стилизации чекбоксов, несколько примеров как стилизовать чекбоксы в кнопки и группы кнопок.
Кнопки
HTML-разметка:
Фокус по клавише Tab:
$(window).keyup(function(e) < var target = $('.checkbox-btn input:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('.checkbox-btn input').focusout(function()< $(this).parent().removeClass('focused'); >);CSS-стили:
.checkbox-btn < display: inline-block; margin: 0 5px 0 0; user-select: none; position: relative; >.checkbox-btn input[type=checkbox] < z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-btn span < display: inline-block; cursor: pointer; padding: 0px 10px; line-height: 30px; border: 1px solid #999; border-radius: 4px; transition: background 0.2s ease; >/* Checked */ .checkbox-btn input[type=checkbox]:checked + span < background: #ffe0a6; >/* Focus */ .focused span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-btn:hover < color: #666; >/* Active */ .checkbox-btn input[type=checkbox]:active:not(:disabled) + span < background: #d2c5ac; color: #000; >/* Disabled */ .checkbox-btn input[type=checkbox]:disabled + span < background: #efefef; color: #666; cursor: default; >.checkbox-btn input[type=checkbox]:checked:disabled + span
Результат:
Группа кнопок
HTML-разметка:
Checkbox #1 Фокус по клавише Tab:
$(window).keyup(function(e) < var target = $('.checkbox-btn-group input:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('.checkbox-btn-group input').focusout(function()< $(this).parent().removeClass('focused'); >);CSS-стили:
.checkbox-btn-group < display: inline-block; >.checkbox-btn-group:after < content: ""; clear: both; display: block; >.checkbox-btn-group label < display: inline-block; float: left; margin: 0; user-select: none; position: relative; >.checkbox-btn-group input[type=checkbox] < z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-btn-group span < display: inline-block; cursor: pointer; padding: 0px 10px; line-height: 30px; border: 1px solid #999; border-right: none; transition: background 0.2s ease; >.checkbox-btn-group label:first-child span < border-radius: 4px 0 0 4px; >.checkbox-btn-group label:last-child span < border-radius: 0 4px 4px 0; border-right: 1px solid #999; >/* Checked */ .checkbox-btn-group input[type=checkbox]:checked + span < background: #ffe0a6; >/* Focus */ .checkbox-btn-group .focused span < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-btn-group label:hover < color: #666; >/* Active */ .checkbox-btn-group input[type=checkbox]:active:not(:disabled) + span < background: #d2c5ac; color: #000; >/* Disabled */ .checkbox-btn-group input[type=checkbox]:disabled + span < background: #efefef; color: #666; cursor: default; >.checkbox-btn-group input[type=checkbox]:checked:disabled + span