Наверняка вы задумались о том, как можно изменить стандартный вид флажков (чекбоксов), чтобы они выглядели привлекательней с учетом дизайна вашего сайта или задач одной конкретной страницы. В этой статье вы найдете ряд практических примеров, которые помогут вам стилизовать элементы <input type="checkbox">
. Для начала разберем пример, который имеет вид переключателя. Давайте посмотрим, как можно стилизовать флажки на примере, который в html-разметке содержит только <input type="checkbox">
и <label>
:
1 2 3 4 5 | <input type="checkbox" id="demo1" checked> <label for="demo1" data-on-label="Вкл." data-off-label="Выкл."></label> <input type="checkbox" id="demo2"> <label for="demo2" data-on-label="Да" data-off-label="Нет"></label> |
Сам пример в действии:
Теперь рассмотрим CSS-стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | label { margin: 2em;} input { display: none;} 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; top: 15px; right: 10px; color: #fff; font-family: Arial, sans-serif; font-size: 18px; } input+label::after { content: ''; position: absolute; top: 2px; left: 2px; 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 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.
Классные подборки ) совместимость бы писали (минимальные требования
Не очень понятно про совместимость, так как флажки и элементы label, которые чаще всего применяются для оформления кода - это теги HTML, которые используются очень давно. Что касается анимаций и псевдоэлементов, то их поддержка тоже очень хорошая на сегодняшний день.
А дальше все зависит от ваших потребностей, знаний и желания разобраться в коде.
Супер! Спасибо! 🙂