See the Pen YYPaOK by Alexey (@leshkacho) on CodePen.
Анимации
See the Pen pretty-checkboxes animation by Alexey (@leshkacho) on CodePen.
Добавление анимация на чекбокс происходит путем добавления описанных в примере классов
Другие возможности
Переключатели
Возможно создание переключателей с заменой текста, иконки только на css!
Происходит это следующим образом
See the Pen toggle pretty-checkboxes by Alexey (@leshkacho) on CodePen.
Можно использовать разные иконки для обоих состояний переключателя
Кастомизация радио-кнопок на чистом css без js
радио кнопки добавляются идентично чекбоксам и с ними работают такие же классы
GitHub проекта Полная документация Скачать архивом с GitHub
Псевдокласс :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 ]
*
Повторять ноль или больше раз.
[,<время>]*
+
Повторять один или больше раз.
<число>+
?
Указанный тип, слово или группа не является обязательным.
В данном примере текст возле отмеченных флажков выделяется фоновым цветом. Результат примера показан на рис. 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
Спойлер
Стилизация переключателей
Стилизация флажков
Флажок — Spectrum CSS
Направление
Версия Vars
Статус компонента
Вклад
Последний выпуск
11 мая 2023 г.
Текущая версия
@spectrum-css/checkbox @6.0.29
Веб-сайт Spectrum
GitHub
Флажки позволяют пользователям выбирать несколько элементов из списка отдельных элементов или помечать один отдельный элемент как выбранный.
Флажки не следует использовать сами по себе, их всегда следует использовать в группе полей.
Недопустимые флажки обозначаются предупреждением HelpText при включении в группу полей.
Флажок с необычайно длинной меткой, пожалуйста, не делайте этого, но если вы это сделали, он должен переносить текст, когда он становится длиннее, чем контейнер, содержащий флажок, который имеет недопустимо длинную метку.
Показать разметку
<метка>
<тип ввода="флажок">
<диапазон>
Флажок с очень длинной меткой, пожалуйста, не делайте этого, но если вы это сделали, он должен переносить текст, когда становится длиннее, чем контейнер, содержащий флажок, который имеет недопустимо длинную метку
Этот компонент можно изменить с помощью пользовательских свойств с префиксом --mod-* . Список этих настраиваемых свойств с префиксом можно найти здесь.
Тихий и подчеркнутый
Spectrum выбрал вариант, ранее известный как тихий , в качестве варианта по умолчанию и добавил вариант с акцентом с теми же стилями, что и предыдущий вариант по умолчанию. Если вы использовали тихий вариант , флажок .spectrum--quiet 9Класс 0149 больше не требуется и может быть удален. Если вам нужно, чтобы переключатель выглядел так, как он был до этого изменения, добавьте .spectrum-Checkbox—выделено .
Размер футболки
Флажок теперь поддерживает размер футболки и требует, чтобы вы указали размер, добавив класс .spectrum-Checkbox--size* . Использование классов .spectrum-Checkbox .spectrum-Checkbox--sizeM приведет к получению предыдущего размера флажка по умолчанию.
Флажок
Tailwind CSS — Flowbite
Требуется FlowbitJS
Начните работу с компонентом флажка, чтобы позволить пользователю выбрать один или несколько параметров в виде квадратного поля, доступного в нескольких размерах и цветах
Компонент флажка можно использовать для получения одного или нескольких выбранных параметров от пользователя в форма квадратного блока, доступного в нескольких стилях, размерах, цветах и вариантах, закодированных с помощью служебных классов из Tailwind CSS и с поддержкой темного режима.
Убедитесь, что вы включили Flowbite в качестве подключаемого модуля в свой CSS-проект Tailwind, чтобы применить все необходимые стили для компонента флажка.
Пример флажка
#
Используйте этот пример элемента флажка по умолчанию в отмеченном и снятом состоянии.
Результат примера показан на рис. 1.
..
..
..
