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

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

Сам пример в действии:

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

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

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

See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen.

И еще один пример:

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

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

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

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

See the Pen [Pure CSS] Delightful Checkbox Animation by Dylan Raga (@dylanraga) on CodePen.

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

See the Pen CSS Checkboxes and Radio Buttons by Jon Kantner (@jkantner) on CodePen.

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

See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen.

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

See the Pen Animated Fill and Strikethrough Checkboxes by Jon Kantner (@jkantner) on CodePen.

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

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

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

See the Pen Toggles by Elen (@ambassador) on CodePen.

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

See the Pen Pure CSS toggle buttons by Elen (@ambassador) on CodePen.

Иконки-переключатели от Braydon Coyer

See the Pen Neuomorphic Checkboxes by Braydon Coyer (@braydoncoyer) on CodePen.

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

See the Pen Pill Switch by Elen (@ambassador) on CodePen.

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

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

Перетекающий переключатель от Nicolas Jesenberger

See the Pen Gooey Toggle Switch by Nicolas Jesenberger (@nicolasjesenberger) on CodePen.

Еще несколько вариантов флажков от Nicolas Jesenberger

See the Pen Wooden Toggles by Nicolas Jesenberger (@nicolasjesenberger) on CodePen.

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

See the Pen Pure CSS Fancy Checkbox/Radio by Raúl Barrera (@raubaca) on CodePen.

Еще один пример от Nicolas Jesenberger 

See the Pen Lego toggles, checkboxes and radio buttons by Nicolas Jesenberger (@nicolasjesenberger) on CodePen.

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

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

Переключатель темы/погоды от Jon Kantner

See the Pen Rolling Theme Switch by Jon Kantner (@jkantner) on CodePen.

Этот автор создал еще впечатляющий переключатель на основе <input type="range">.

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

See the Pen Flip checkbox by Elen (@ambassador) on CodePen.

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

See the Pen CSS "Ripple/Wave" checkbox and radio button by Matt Sisto (@msisto) on CodePen.

Чекбоксы можно еще использовать для создания модальных, или попап-окон.

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

Вариант 1

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

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

See the Pen Paper Clip Toggle Switch by Jon Kantner (@jkantner) on CodePen.

Объемный переключатель от того же автора

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

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

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

See the Pen Pencil and Paper Checkboxes by Jon Kantner (@jkantner) on CodePen.

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

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

Вариант 1

See the Pen Toggle Switch with Rolling Label by Jon Kantner (@jkantner) on CodePen.

Вариант 2

See the Pen Light/Dark Mode Toggle With Curtain Effect by Jon Kantner (@jkantner) on CodePen.

Вариант 3

See the Pen Light/Dark Toggle With Morphing Icon by Jon Kantner (@jkantner) on CodePen.

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

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

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

See the Pen CSS + HTML only Accordion Element by Alex Bergin (@abergin) on CodePen.

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

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

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

See the Pen Checkbox group styled as tiles by Håvard Brynjulfsen (@havardob) on CodePen.

Множественный выбор из группы от Jon Kantner

See the Pen Checkbox Animations With Indeterminate State by Jon Kantner (@jkantner) on CodePen.

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

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

See the Pen Expand Information by Lisi (@lisilinhart)on CodePen.

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

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

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

Автор leimapapa 

See the Pen ⚙️ Giant Gear Toggle ⚙️ by leimapapa (@leimapapa) on CodePen.

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

Отличная стилизация <input type="checkbox"> в виде выключателя с внутренней подсветкой от Yoav Kadosh.

See the Pen Realistic Red Switch (Pure CSS) by Yoav Kadosh (@ykadosh) on CodePen.

Переключатели от Jhey

See the Pen CSS Toggle Switch by Jhey (@jh3y) on CodePen.

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

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

See the Pen Light Bulb Toggle Switch by Jon Kantner (@jkantner) on CodePen.

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

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

See the Pen Skeuomorphic Lever Checkbox by Jon Kantner (@jkantner) on CodePen.

Огромное количество стилизаций флажков от Alvaro Montoro

Flat-вариант

See the Pen Toggle grow II by Alvaro Montoro (@alvaromontoro) on CodePen.

и еще один плоский дизайн

See the Pen Toggle Adobe by Alvaro Montoro (@alvaromontoro) on CodePen.

Анимация перемещения

See the Pen Toggle On/Off 4 by Alvaro Montoro (@alvaromontoro) on CodePen.

С градиентом

See the Pen Toggle Colorful (v2) by Alvaro Montoro (@alvaromontoro) on CodePen.

Снова градиент

See the Pen Toggle Blend (IV - Squared Technicolor 2) by Alvaro Montoro (@alvaromontoro) on CodePen.

С галочкой

See the Pen Toggle Square (VII) by Alvaro Montoro (@alvaromontoro) on CodePen.

Со звездой

See the Pen Toggle star by Alvaro Montoro (@alvaromontoro) on CodePen.

Неоновый переключатель

See the Pen Smooth Neon Toggle (v3) by Alvaro Montoro (@alvaromontoro) on CodePen.

С буквами после checkbox

See the Pen Toggle On/Off 3 by Alvaro Montoro (@alvaromontoro) on CodePen.

Переход из синего в красный и наоборот

See the Pen Toggle Worm (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

Летят самолеты, летят..

See the Pen Toggle Airplane Mode by Alvaro Montoro (@alvaromontoro) on CodePen.

Вариант для Хеллоуина

See the Pen Toggle Skull by Alvaro Montoro (@alvaromontoro) on CodePen.

Используем шестиугольники для checkbox

See the Pen Toggle Hexagon (WIP) by Alvaro Montoro (@alvaromontoro) on CodePen.

День и ночь

See the Pen Toggle Switch: Light/Dark by Alvaro Montoro (@alvaromontoro) on CodePen.

Эффект листания страницы

See the Pen Toggle Flip by Alvaro Montoro (@alvaromontoro) on CodePen.

Деревянный стиль

See the Pen Toggle Switch - Wooden Texture (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

Деревянная текстура в другой стилистике

See the Pen Toggle Switch - Wooden Texture (I) by Alvaro Montoro (@alvaromontoro) on CodePen.

Выбор фруктов

See the Pen Toggle Pill (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

Прыжки с переворотом

See the Pen Toggle Spin (I) by Alvaro Montoro (@alvaromontoro) on CodePen.

И вариант попроще

See the Pen Toggle Spin (III) by Alvaro Montoro (@alvaromontoro) on CodePen.

Переворачивающаяся точка

See the Pen Toggle Liquid (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

Снова переворот, причем со сменой фона страницы

See the Pen Toggle liquid by Alvaro Montoro (@alvaromontoro) on CodePen.

Точка "обходит" сзади

See the Pen Toggle Liquid (III) - WIP by Alvaro Montoro (@alvaromontoro) on CodePen.

Изменение фона переключателя

See the Pen Toggle Simple by Alvaro Montoro (@alvaromontoro) on CodePen.

3d-шарики

See the Pen Toggle Pearl by Alvaro Montoro (@alvaromontoro) on CodePen.

Разноцветный 3d неоновые переключатели

See the Pen Toggle Neon (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

Похожий по стилистике более светлый вариант и без неоновой подсветки

See the Pen Toggle 2024-02-26 (v2) by Alvaro Montoro (@alvaromontoro) on CodePen.

Футуристический переключатель с шестиугольником

See the Pen Toggle Hexagon II (use SVG instead) by Alvaro Montoro (@alvaromontoro)on CodePen.

Металлический стиль

See the Pen Toggle Metal by Alvaro Montoro (@alvaromontoro) on CodePen.

И еще один

See the Pen Toggle Toothed (I) by Alvaro Montoro (@alvaromontoro) on CodePen.

Включатель/выключатель

See the Pen Toggle Switch: Rebound (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

И еще один переключатель

See the Pen toggle red switch by Alvaro Montoro (@alvaromontoro) on CodePen.

И еще

See the Pen Toggle Switch: Rebound (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

Небольшой переключатель

See the Pen Toggle On/Off 2 by Alvaro Montoro (@alvaromontoro) on CodePen.

Почти такой же, как на стене

See the Pen Toggle on/off by Alvaro Montoro (@alvaromontoro) on CodePen.

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

See the Pen Toggle Adobe (II) by Alvaro Montoro (@alvaromontoro) on CodePen.

Переключатель с ручкой-рычагом

See the Pen Toggle lever by Alvaro Montoro (@alvaromontoro) on CodePen.

Перетекающий переключатель

See the Pen Toggle Elastic by Alvaro Montoro (@alvaromontoro)on CodePen.

Еще несколько вариантов 3D-переключателей

Автор Yoav Kadosh

See the Pen 3D Orange Switch (Pure CSS) by Yoav Kadosh (@ykadosh) on CodePen.

От автора Jon Kantner

See the Pen 3D Tilt Toggle by Jon Kantner (@jkantner) on CodePen.

Светлый  и темный  вариант

See the Pen Rocker Switches by Jon Kantner (@jkantner) on CodePen.

Яичницу поджарим?

See the Pen Skillet Switch by Jon Kantner (@jkantner) on CodePen.

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

Тянет на полноценную страницу. Автор Ivan Grozdic

See the Pen Pricing by Ivan Grozdic (@ig_design) on CodePen.

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

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

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

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

See the Pen Random Password Generator - HTML | CSS | JS by Sikriti Dakua (@dev_loop) on CodePen.

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

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

See the Pen Checkbox Trickery: To-Do List by Will Boyd (@lonekorean) on CodePen.

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

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

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

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

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

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