Стилизация чекбокса: CSS стилизация checkbox и radio — 2 варианта

Содержание

Бесконечный CodePen. 9 демок для тех, кто любит делать красиво — журнал «Доктайп»

15 февраля 2022

HTML

Евгений Шкляр

Правильно говорят, что лучший способ чему-то научиться — подсмотреть у тех, кто умеет. Поэтому принесли вам подборку с CodePen, в которой хорошие разработчики делают интересные штуки и делятся ими со всеми. В этом выпуске — интерфейсы на CSS и React.

Accent-color w/custom properties

Начнём с простого и будем постепенно разгоняться. Здесь у нас стилизация чекбоксов с помощью кастомных свойств. Изящное решение, с которым проще всего разобраться.

See the Pen Accent-color w/custom properties [updated] by Michelle Barker (@michellebarker) on CodePen.

Lotsa Notifications

Красивые всплывающие уведомления с разными наборами кнопок и стилизацией. Подойдут и для уведомления о завершении загрузки, и о неотправленном письме, и о сработавшем будильнике.

See the Pen Lotsa Notifications by Jon Kantner (@jkantner) on CodePen.

Login Form with floating placeholder and light button

Как следует из названия, форма входа на сайт со светящейся кнопкой и плейсхолдером, который сдвигается при клике.

See the Pen Login Form with floating placeholder and light button by Soufiane Khalfaoui HaSsani (@soufiane-khalfaoui-hassani) on CodePen.

Candy Color Button Animation

Два десятка анимированных кнопок на чистом CSS. Градиенты, анимация при наведении, перекраска, вращение и другие эффекты.

See the Pen Candy Color Button Animation by Yuhomyan (@yuhomyan) on CodePen.

Buttons. CSS Hover

Ещё немного кнопок — на этот раз hover-эффекты во всей красе.

See the Pen Buttons. CSS Hover by Marina Osadcha (@Marina_Os) on CodePen.

Download Button Animation

Кнопок много не бывает — поэтому вот вам ещё. Смешные анимации на кнопке загрузки, напоминающие спуск шторы. HTML, SCSS, JavaScript.

See the Pen Download Button Animation by Aaron Iker (@aaroniker) on CodePen.

Social Media Icons with Popups

Последние кнопки на сегодня. Многие могут захотеть встроить себе в портфолио красивую ссылку на Гитхаб или другую соцсеть — теперь можно это сделать с красивой всплывашкой.

See the Pen Social Media Icons with Popups (HTML + Pure CSS Only) by Abdelrhman Said (@abdelrhmansaid) on CodePen.

Impossible Checkbox v2

Наверняка вы видели видео с «невозможной коробкой» — нажимаете на переключатель, а через пару секунд вылезает палец и расщёлкивает кнопку. Наконец-то кто-то сделал это и в вебе — посмотрите, какая прекрасная лапка. Она и замыкает нашу подборку на сегодня.

See the Pen Impossible Checkbox v2 ???? by Jhey (@jh4y) on CodePen.

На этом сегодня всё — если со всеми пенами разбираться внимательно, хватит как раз до следующего выпуска.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

Как понять, что перед вами заголовок

Не всё, что кажется заголовком, им является.

HTML

8 июня 2023

Как создавать адаптивные изображения. Атрибут srcset

Два актуальных способа

HTML

25 мая 2023

Текст с новой строки в HTML.

Все способы

Как не запутаться, выбирая тег.

HTML

24 мая 2023

Как работает margin. Правила внешних отступов

Как верстать блочные элементы

HTML

19 мая 2023

Как сделать таблицу в HTML

Шаблон таблицы для любого случая.

HTML

16 мая 2023

search: новый HTML-элемент в 2023

Перевод статьи Альваро Монторо о новом теге для поиска.

HTML

12 мая 2023

Как сверстать доступный сайт

Что важно учесть, чтобы сайтом смогли пользоваться все.

HTML

11 мая 2023

Что такое спецификация и как её читать

И научиться применять знания.

HTML

13 апреля 2023

В каких браузерах тестировать вёрстку в 2023

Понятная инструкция для тех, кто запутался в хромиумах.

HTML

11 апреля 2023

3 способа валидации форм

Как работает валидация на стороне сервера и клиента.

HTML

4 апреля 2023

Псевдокласс :checked | CSS | WebReference

Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.

Синтаксис

Селектор:checked { ... }

Примеры использования

input[type="radio"]:checked { ... }

Стиль применяется только ко включенным переключателям.

input[type="checkbox"]:checked { ... }

Стиль применяется только к помеченным флажкам (чекбоксам).

option:checked { ... }

Стиль применяется только к выбранным элементам списка.

Синтаксис

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

<!DOCTYPE html> <head> <meta charset=»utf-8″> <title>checked</title> <style> input:checked + span { background: #fc0; } </style> </head> <body> <p><strong>С какими операционными системамы вы знакомы?</strong></p> <p><input type=»checkbox» name=»a1″><span>Windows 7</span><br> <input type=»checkbox» name=»a2″><span>Windows Vista</span><br> <input type=»checkbox» name=»a3″><span>Windows XP</span><br> <input type=»checkbox» name=»a4″><span>System X</span><br> <input type=»checkbox» name=»a5″><span>Linux</span><br> <input type=»checkbox» name=»a6″><span>Mac OS</span></p> <p><input type=»submit» value=»Отправить»></p> </body> </html>

В данном примере текст возле отмеченных флажков выделяется фоновым цветом.

Результат примера показан на рис. 1.

Рис. 1. Результат использования псевдокласса :checked

Спецификация

Спецификация	Статус
WHATWG HTML Living Standard	Живой стандарт
HTML5	Предлагаемая рекомендация
Selectors Level 4	Рабочий проект
CSS Basic User Interface Module Level 3	Рабочий проект
Selectors Level 3	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.

Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


9	12	1	9	3.1	1


2.1	1	9.5	3.1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Псевдоклассы Формы

См. также

Аккордеон меню
Вкладки на CSS
Выпадающее меню
Использование :checked
Спойлер
Стилизация переключателей
Стилизация флажков

98 Чекбоксы CSS

Коллекция бесплатных примеров HTML и пользовательских флажков CSS (с изображением, с меткой, флажком и т. д.) из CodePen, GitHub и других ресурсов. Обновление майской коллекции 2021 года. Девять новых предметов.

Флажки начальной загрузки
Флажки jQuery

Страница обновления функций анимации

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Карточка флажка

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

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

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Стиль пользовательского флажка Pure CSS

Кроссбраузерные настраиваемые флажки, стилизованные с использованием только CSS и SVG.

Простая анимация контрольного списка.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Флажок Todo

Флажок Todo с заливкой текста и эффектом зачеркивания при установке флажка.

Микровзаимодействие — это несколько вариантов классического флажка.

Флажок

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Флажок

Простой флажок с анимацией.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Необычный флажок

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

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

Флажок с эмодзи (без JS). Создавайте более выразительные флажки с помощью эмодзи. Они сочетают в себе простоту флажков для пользователя с выразительностью эмодзи. Он использует флажок и переключатель для создания двоичного или недвоичного выбора. Анимации выполняются с помощью переходов CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Переключить

Красивое плавное движение и добавленная детализация с анимированным поворотом головы. На основе «Toggle» Дэрила Джинна.

О коде

Переключить

Тумблер на чистом CSS.

О коде

Классный флажок с SVG

Пользовательский флажок, использующий SVG для анимации галочки внутри него.

О коде

Тумблер CSS

Мягкий тумблер CSS.

О коде

Смайлик Флажок

Флажок эмодзи Pure CSS.

О коде

Флажки, вдохновленные материалом

Хитрость заключается в размещении метки после флажка. Таким образом, вы можете использовать состояние :checked для переключения различных псевдоэлементов на метке. Нет необходимости в javascript. Чтобы заставить фоновую анимацию работать, вам понадобится немного магии. Метка : перед элементом представляет собой небольшой кружок 10×10. Мы анимируем его масштаб вместо размера, чтобы мы могли сохранить пропорции круга и сделать так, чтобы он «заполнял» полосу. Максимальная ширина формы установлена на 550px. :before элемент анимируется с использованием scale3d (для аппаратного ускорения) в 56 раз. 56 * 10 === 560. Это позволяет кругу заполнить полосу, немного выходя за пределы контейнера входной группы.

О коде

Флажки

флажка на чистом CSS.

О коде

Пользовательский флажок/тумблер

Коллекция из четырех тумблеров, сделанных с помощью HTML и CSS без единой строки JavaScript. Два переключателя также сделаны с помощью SVG.

О коде

Флажки на чистом CSS3 с FontAwesome

флажка на чистом CSS3 с FontAwesome и переходами.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: font-awesome.css

О коде

Стили радио и флажков

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

О коде

Флажки стиля

Флажки стиля — использование пользовательских свойств CSS.

О коде

3D-микшер Vll Plus

Используйте переменные CSS для управления состояниями.

О коде

Галочка Анимация

Чистая анимация флажка CSS.

О коде

Флажок Анимация пути SVG

Флажок HTML и CSS с анимацией пути SVG.

О коде

Ползунок переключения на чистом CSS

Чистый CSS Переключить ползунок/флажок с галочкой SVG и крестиком.

Демонстрационное изображение: Реалистичный переключатель

Реалистичный переключатель

Реалистичный переключатель CSS (флажок).
Сделано Натаном Тейлором
19 февраля 2017 г.

скачать демо и код

Демонстрационное изображение: Флажок Jelly

Флажок Jelly

Флажок Jelly с HTML и CSS.
Сделано Андреасом Стормом
8 февраля 2017 г.

скачать демо и код

Демонстрационное изображение: Флажок Full CSS

Флажок Full CSS

Кнопка флажка Full CSS. Вы найдете: — Фон SVG — переход css — псевдоэлемент — нет JS.
Сделано Тимоти Гиньяром
5 февраля 2017 г.

скачать демо и код

Демонстрационное изображение: Пользовательские флажки, переключатели и поля выбора

Пользовательские флажки, переключатели и поля выбора

Полностью CSS: настраиваемые флажки, переключатели и поля выбора.
Сделано Кенаном Юсуфом
18 января 2017 г.

скачать демо и код

Демонстрационное изображение: Тумблер All-CSS

Тумблер All-CSS

Тумблер All-CSS (флажок).
Сделано Маркусом Бернеттом
12 января 2017 г.

скачать демо и код

Демонстрационное изображение: Анимированный флажок Pure CSS

Анимированный флажок Pure CSS

Флажок с анимацией на чистом html/css, созданный для аудитории блога North of Rapture.
Автор Павел Дурчок
9 января 2017 г.

скачать демо и код

Демонстрационное изображение: Реалистичные флажки

Реалистичные флажки

Реалистичные флажки только с CSS.
Сделано Твикито
19 октября 2016 г.

скачать демо и код

Демонстрационное изображение: Elegantly Simple Checkbox

Elegantly Simple Checkbox

Элегантно простой флажок с HTML и CSS.
Автор Богдан
19 августа 2016 г.

скачать демо и код

Демонстрационное изображение: Флажок Google Material Style (только CSS)

Флажок Google Material Style (только CSS)

Флажки основаны на реализации флажки полимера в материальном дизайне. Они не полностью повторяют их, а являются просто упражнением, чтобы имитировать их только с помощью css. Они работают только в хроме 🙂
Сделано Сэмом
12 августа 2016 г.

скачать демо и код

Демонстрационное изображение: Пользовательский флажок CSS

Пользовательский флажок CSS

Пользовательский флажок HTML и CSS.
Сделано Дереком Морашем
7 августа 2016 г.

скачать демо и код

Демонстрационное изображение: Флажки на чистом CSS

Флажки на чистом CSS

Кнопки-переключатели на чистом HTML и CSS.
Сделано Маурисио Альенде
17 июня 2016 г.

скачать демо и код

Демонстрационное изображение: Флажок SVG

Флажок SVG

Флажок, используемый для статьи SitePoint о стилизации элементов управления формы с помощью Sass.
Сделано СЕРЫЙ ПРИЗРАК
10 июня 2016 г.

скачать демо и код

Демонстрационное изображение: Пользовательский флажок

Пользовательский флажок

Пользовательские флажки, которые хорошо работают со шрифтом значка. Поддержка современных браузеров с резервным вариантом IE6+.
Автор mattdrose
31 мая 2016 г.

скачать демо и код

Демонстрационное изображение: Fluid Checkboxes

Fluid Checkboxes

Было интересно, возможна ли анимация с помощью чисто CSS/HTML флажков.
Сделано Бьорном
18 апреля 2016 г.

скачать демо и код

Демонстрационное изображение: Простой флажок

Простой флажок

Простой флажок HTML и CSS.
Сделано Памелой Дейн
15 апреля 2016 г.

скачать демо и код

Демонстрационное изображение: Флажок CSS Morphing

Флажок Morphing CSS

Флажок HTML & CSS morphing.
Автор Sjoerd de Roij
5 апреля 2016 г.

скачать демо и код

Демонстрационное изображение: Другой переключатель

Другой переключатель

Переключатель с HTML и CSS.
Сделано Маккензи Боббитт
19 февраля 2016 г.

скачать демо и код

Демонстрационное изображение: Пользовательский флажок

Пользовательский флажок

Пользовательский флажок с маркером SVG.
Сделано Томми Ролчау Матисеном
5 февраля 2016 г.

скачать демо и код

Демонстрационное изображение: Флажок Flat UI

Флажок Flat UI

Флажок Flat UI с HTML и CSS.
Сделано Арсеном Збидняковым
19 января 2016 г.

скачать демо и код

Демонстрационное изображение: Флажок движения

Флажок движения

Ремейк флажка движения дриблинга Марка Лэмба перед сном!
Сделано Йонасом Бадаликом
4 ноября 2015 г.

скачать демо и код

Демонстрационное изображение: Кнопка-переключатель

Кнопка-переключатель

Красивая кнопка-переключатель.
Сделано Кёсукэ
3 ноября 2015 г.

скачать демо и код

Демонстрационное изображение: Тумблер Gooey

Тумблер Gooey

Флажок Gooey Только CSS.
Автор Винсент Дюран
14 сентября 2015 г.

скачать демо и код

Демонстрационное изображение: переключатели на чистом CSS

Pure CSS Toggles

Получаем удовольствие от анимации и переходов 🙂
Сделано Рафаэлем Гонсалесом
22 июля 2015 г.

скачать демо и код

Демонстрационное изображение: Пользовательский флажок

Пользовательский флажок

Пустой флажок превращается в флажок. Никакой дополнительной разметки, только ввод, метка для него и немного CSS.
Сделано Валерием
20 июня 2015 г.

скачать демо и код

Демонстрационное изображение: Обман с флажком: простой переключатель

Обман с флажком: простой переключатель

Основная формула для управления внешним видом флажка. Нет JavaScript.
Сделано Уиллом Бойдом
16 июня 2015 г.

скачать демо и код

Демонстрационное изображение: Стиль флажка 2.0

Стиль флажка 2.0

Стиль флажка в HTML и CSS.
Сделано Лоренцо Д’Ианни
4 июня 2015 г.

скачать демо и код

Демонстрационное изображение: Переключатель кнопки флажка

Переключатель кнопки флажка

Отзывчивый флажок, установленный размером шрифта, легко установить внутренний текст для состояний включения и выключения.
Сделано Дарреном
12 мая 2015 г.

скачать демо и код

Демонстрационное изображение: Восхитительная анимация флажков

Восхитительная анимация флажков

Аккуратные маленькие флажки с приятной анимацией без SVG.
Сделано Диланом Рагой
1 февраля 2015 г.

скачать демо и код

Демонстрационное изображение: Флажок в простом стиле

Флажок в простом стиле

Флажок в простом стиле с HTML и CSS.
Сделано Хуаном Кабрерой
27 октября 2014 г.

скачать демо и код

Демонстрационное изображение: Пользовательский флажок

Пользовательский флажок

Очень простой настраиваемый флажок. Только с использованием HTML и CSS.
Сделано Андре Кортеллини
4 сентября 2014 г.

скачать демо и код

Демонстрационное изображение: анимированный флажок CSS3

Анимированный флажок CSS3

Анимированный CSS3 (кроме IE9) флажок, который можно использовать в качестве класса на метке для флажка (для управления значением флажка) или можно использовать в качестве класса для автономного элемента и переключать, добавляя класс через JavaScript.
Сделано Джимми Гилламом
10 июня 2014 г.

скачать демо и код

Демонстрационное изображение: Флажок

Флажок

Флажок полный CSS с переходом.
Сделано Кевином Шассаном
5 июня 2014 г.

скачать демо и код

Демонстрационное изображение: Флажок с SVG

Флажок с SVG

Флажок с HTML, CSS и SVG.
Сделано Фэн Ляном
13 мая 2014 г.

скачать демо и код

О коде

Использование псевдоэлементов для стиля ввода

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: нет

Зависимости: —

Демонстрационное изображение: семантические флажки

семантические флажки

семантические анимированные флажки CSS.
Сделано Деметри Ганофф
30 марта 2014 г.

скачать демо и код

Демонстрационное изображение: Флажок с анимацией только для CSS

Флажок с анимацией только с CSS

Еще один анимированный флажок.
Сделано Тимом Севериеном
6 февраля 2014 г.

скачать демо и код

С код

Чекбоксы CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

Демонстрационное изображение: Стильный флажок

Стильный флажок

Флажок только CSS.
Сделано Стефаном Джудисом
22 сентября 2013 г.

скачать демо и код

Демонстрационное изображение: Плоский тумблер

Плоский тумблер

Ремейк плоского тумблера, сделанного Джошуа Эндрю Дэвисом.
Сделано Феликсом Де Монтисом
6 сентября 2013 г.

скачать демо и код

Демонстрационное изображение: Флажок CSS

Флажок CSS

Пользовательский флажок со стилем …
Сделано Pixellip
12 июня 2013 г.

скачать демо и код

Демонстрационное изображение: Флажок Survys Rebound

Флажок Survys Rebound

Флажок Абсолютно CSS.
Сделано Лайонелом Т.
9 июня 2013 г.

скачать демо и код

Демонстрационное изображение: Анимированные флажки в стиле Ubuntu Touch

Анимированные флажки в стиле Ubuntu Touch

Анимированные флажки в стиле Ubuntu Touch с HTML и CSS.
Сделано Эдуардом Майером
26 мая 2013 г.

скачать демо и код

Демонстрационное изображение: Флажок «Очистить CSS»

Флажок «Очистить CSS»

Флажок «Очистить HTML и CSS».
Сделано Джеффом Пауэрсом
25 августа 2012 г.

скачать демо и код

Флажок CSS: стилизация флажков HTML очень проста

Первоначально опубликовано в моем блоге

Старая история

Раньше HTML-компоненты, такие как checkbox , было довольно сложно стилизовать так, как мы хотели. Часто эти компоненты выбиваются из общего дизайна страницы, что не очень хорошо сказывается на пользовательском опыте.

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

Чтобы преодолеть эти ситуации, разработчики часто прибегали к хитростям, таким как скрытие ввода, создание изображений и значков для галочки и добавление кода JavaScript для обработки проверки/снятия отметки. Если вы спросите меня, это не так уж красиво, и кажется, что для достижения чего-то простого требуется много работы.

Новая история

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

Новая история, с моей точки зрения, заключается в том, что мы можем стилизовать флажок, не скрывая его и не добавляя изображения SVG и код JavaScript. Это можно сделать, используя вместо этого следующее:

CSS внешний вид свойство
Галочка HTML символ (✓)

Внешний вид Свойство

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

Это свойство поддерживает множество значений, но нас интересует значение none . По сути, мы хотим удалить все нативные стили и применить пользовательские. В конце концов, у нашего флажка будут красивые цвета и переходы, и, самое главное, он будет выглядеть одинаково во всех основных браузерах.

Пример использования:

 .my-class {
   -webkit-внешний вид: значение;
   -moz-внешний вид: значение;
   /* -o-внешний вид: значение; - Не требуется, так как в новой версии Opera используется -
      префикс webkit для этого свойства, но мы добавили его, тем не менее, на всякий случай
      из этого
    */
   внешний вид: стоимость;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Хорошо, давайте углубимся в код.

HTML

Наша HTML-разметка довольно проста. У нас есть label , обертывающий наш input и span для хранения текста внутри. Выглядит это так:

 <метка>
    <тип ввода = "флажок" />
    Проверь меня

Войти в полноэкранный режимВыйти из полноэкранного режима

Здесь ничего особенного. Мы использовали элемент-обертку, чтобы упростить выравнивание внутренних элементов по вертикали. Это делается с помощью макета flexbox, который мы увидим в разделе CSS.

CSS

Стиль CSS выглядит следующим образом:

 .checkbox {
    дисплей: встроенный гибкий;
    курсор: указатель;
    положение: родственник;
}
.флажок > диапазон {
    цвет: #34495E;
    набивка: 0,5 бэр 0,25 бэр;
}
.флажок > ввод {
    высота: 25 пикселей;
    ширина: 25 пикселей;
    -webkit-внешний вид: нет;
    -моз-внешний вид: нет;
    -о-внешний вид: нет;
    внешний вид: нет;
    граница: 1px сплошная #34495E;
    радиус границы: 4px;
    контур: нет;
    продолжительность перехода: 0,3 с;
    цвет фона: #41B883;
    курсор: указатель;
  }
.checkbox> ввод: отмечен {
    граница: 1px сплошная #41B883;
    цвет фона: #34495Е;
}
.checkbox > input:checked + span::before {
    содержимое: '\2713';
    дисплей: блок;
    выравнивание текста: по центру;
    цвет: #41B883;
    положение: абсолютное;
    слева: 0,7 бэр;
    верх: 0,2 бэр;
}
.checkbox> ввод: активный {
    граница: 2px сплошная #34495E;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Давайте разберем важные части, чтобы подтвердить утверждение выше. Первый шаг — использовать свойство появления и удалить стиль по умолчанию:

...
-webkit-внешний вид: нет;
-моз-внешний вид: нет;
-о-внешний вид: нет;
внешний вид: нет;
...

Войти в полноэкранный режимВыйти из полноэкранного режима

Надеемся, что это свойство скоро станет стандартом, и мы сможем использовать его без префиксов, специфичных для браузера.

Затем нам нужно предоставить наши пользовательские границы и фон:

 ...
граница: 1px сплошная #34495E;
радиус границы: 4px;
контур: нет;
цвет фона: #41B883;
курсор: указатель;
...

Войти в полноэкранный режимВыйти из полноэкранного режима

И, наконец, мы будем использовать псевдокласс ::before для стилизации символа HTML.