Наверняка вы задумались о том, как можно изменить стандартный вид флажков (чекбоксов), чтобы они выглядели привлекательней с учетом дизайна вашего сайта или задач одной конкретной страницы. В этой статье вы найдете ряд практических примеров, которые помогут вам стилизовать элементы <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.18892
И еще один пример:
See the Pen Simple CSS Checkbox by Tristan White (@triss90) on CodePen.18892
Примеры стилизации флажков с ресурса codepen.io
Как работает стилизация
В этом примере видно, где расположен флажок, который обычно скрывается с помощью свойства display: none, и как стилизованы label
. Откройте вкладку CSS и проанализируйте код.
See the Pen [Pure CSS] Delightful Checkbox Animation by Dylan Raga (@dylanraga) on CodePen.18892
Простое решение для флажков и переключателей от Jon Kantner.
See the Pen CSS Checkboxes and Radio Buttons by Jon Kantner (@jkantner) on CodePen.18892
Близкие к стандартным варианты флажков, переключателей и выпадающих списков от Kenan Yusuf
See the Pen Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf) on CodePen.18892
Зачеркивание при выборе флажка с анимацией
See the Pen Animated Fill and Strikethrough Checkboxes by Jon Kantner (@jkantner) on CodePen.18892
Несколько интересных решений для флажков и переключателей от Brad Bodine
See the Pen CSS3 Checkbox Styles by Brad Bodine (@bbodine1) on CodePen.18892
Несколько похожих переключений состояний чекбокса от Olivia Ng
See the Pen Toggles by Elen (@ambassador)
on CodePen.0
Разные виды переключателей от Mauricio Allende
See the Pen Pure CSS toggle buttons by Elen (@ambassador) on CodePen.0
Анимированное переключение состояний флажка в виде пилюли
See the Pen Pill Switch 💊 by Elen (@ambassador) on CodePen.18892
Круглая кнопка с анимацией от mandycodestoo
See the Pen 100dayscss-66 by @mandycodestoo (@mandycodestoo) on CodePen.18892
Анимация текста флажков и радио-кнопок от Raúl Barrera
See the Pen Pure CSS Fancy Checkbox/Radio by Raúl Barrera (@raubaca) on CodePen.18892
Подсветка текста label + анимация выбора чекбокса от Adam Quinlan
See the Pen chippy checkbox inputs by Adam Quinlan (@quinlo) on CodePen.18892
Анимированные флажки с изменением цвета на основе css-переменных от Stas Melnikov
See the Pen #CodePenChallenge | Pure CSS Checkboxes by Stas Melnikov (@melnik909) on CodePen.18892
Анимация флажков с переворотом
See the Pen Flip checkbox by Elen (@ambassador) on CodePen.18892
Анимация флажков и переключателей в стиле Material Design от Matt Sisto
See the Pen CSS "Ripple/Wave" checkbox and radio button by Matt Sisto (@msisto) on CodePen.18892
Перекатывающийся шарик от Jon Kantner
Вариант 1
See the Pen Toy Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892
Вариант 2 со скрепкой
See the Pen Paper Clip Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892
Карандаш для отметки выбора флажка
Еще один вариант анимации от Jon Kantner, но с появлением карандаша. Отличное решение для тестов, например.
See the Pen Pencil and Paper Checkboxes by Jon Kantner (@jkantner) on CodePen.18892
Меняем цветовую схему переключателем
Автор Jon Kantner предлагает вашему вниманию вариант кода, при котором клик на чекбоксе меняет цвет фона.
Вариант 1
See the Pen Toggle Switch with Rolling Label by Jon Kantner (@jkantner) on CodePen.18892
Вариант 2
See the Pen Light/Dark Mode Toggle With Curtain Effect by Jon Kantner (@jkantner) on CodePen.18892
Переключатель энергии
See the Pen Blocky Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892
Реализация аккордеона на чистом CSS с использованием чекбоксов от Alex Bergin
See the Pen CSS + HTML only Accordion Element by Alex Bergin (@abergin) on CodePen.18892
Переключатель цены от Aniruddha Banerjee
See the Pen Pricing Card Design by Aniruddha Banerjee (@imanirudh1) on CodePen.0
Выбор группы иконок от Håvard Brynjulfsen
See the Pen Checkbox group styled as tiles by Håvard Brynjulfsen (@havardob) on CodePen.0
Использование переключателя для показа скрытого контента
Скрытый checkbox нужен для отображения блока с информацией, которая не видна изначально. Автор Lisi.
See the Pen Expand Information by Lisi (@lisilinhart)on CodePen.0
Сложные примеры
Оказывается, флажки (чекбоксы) можно стилизовать так, что пользователи вряд ли догадаются о том, что используют именно эти элементы.
Шестеренки в переключателе с анимацией
Автор leimapapa
See the Pen ⚙️ Giant Gear Toggle ⚙️ by leimapapa (@leimapapa) on CodePen.0
Флажок-выключатель
Отличная стилизация <input type="checkbox">
в виде выключателя с внутренней подсветкой от Yoav Kadosh.
See the Pen Realistic Red Switch (Pure CSS) by Yoav Kadosh (@ykadosh) on CodePen.18892
Лампа-переключатель
Вариант попроще внешне от Jon Kantner, но в коде вы найдете очень меого правил.
See the Pen Light Bulb Toggle Switch by Jon Kantner (@jkantner) on CodePen.18892
Флажок-переключатель
Настоящий переключатель от Jon Kantner. Здесь использован не только CSS, но и JS-код.
See the Pen Skeuomorphic Lever Checkbox by Jon Kantner (@jkantner) on CodePen.18892
Еще один вариант 3D-переключателя
Автор Yoav Kadosh
See the Pen 3D Orange Switch (Pure CSS) by Yoav Kadosh (@ykadosh) on CodePen.0
3D-трансформации с анимацией
Глядя на этот пример, понимаешь, что стилизация переключателей - это наименьшее из того, что сделал автор Ivan Grozdic . Отличный вариант для туристического сайта в плане выбора услуг.
See the Pen Pricing - pure css - #16 by Ivan Grozdic (@ig_design) on CodePen.18892
Пример генератора пароля с использованием флажков
See the Pen Random Password Generator - HTML | CSS | JS by Sikriti Dakua (@dev_loop) on CodePen.18892
ToDo List (список дел) от Will Boyd
Интересно то, что при отметке чекбокса вы получаете список дел с подсчетом сделанных и несделанных заданий на основе только лишь CSS, совсем без JavaScript-кода, за счет использования свойства counter-increment
и свойства order Flexbox-модели.
See the Pen Checkbox Trickery: To-Do List by Will Boyd (@lonekorean) on CodePen.18892
И еще один ToDo List от Daniel Ramos
Только CSS, без JavaScript
See the Pen To do List + CSS by Daniel Ramos (@DanielRamos) on CodePen.0
Бонус. Невключаемый чекбох
Для тех, кто дочитал до конца - бонус - чекбокс, который нельзя оставить включенным, так как вы рассердите мишку. Он даже рычать умеет и хмурить брови. Наслаждайтесь ))) Написано на React. Автор Jhey.
See the Pen Impossible Checkbox v2 🐻 by Jhey (@jh3y)
on CodePen.0
Классные подборки ) совместимость бы писали (минимальные требования
Не очень понятно про совместимость, так как флажки и элементы label, которые чаще всего применяются для оформления кода - это теги HTML, которые используются очень давно. Что касается анимаций и псевдоэлементов, то их поддержка тоже очень хорошая на сегодняшний день.
А дальше все зависит от ваших потребностей, знаний и желания разобраться в коде.
Супер! Спасибо! 🙂