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

Leave a Comment / Css / By /

Содержание

Библиотека для стилизации чекбоксов на чистом css

Представляем на ваш суд отличную легкую библиотеку, созданную lokesh-coder и предназначенную для стилизации и кастомизации чекбоксов на чистом css.

Вот отличный пример, демонстрирующий возможности данной библиотеки:

Преимущества кастомизации чекбоксов и радиокнопок с помощью данной библиотеки:

  • Базовые
    • Фигуры — Квадрат, скругленная, круг
    • Варианты — Стандартный, заполненный, с тонкой обводкой
    • Цвета — primary, success, info, warning и danger
    • Варианты заполнения — заливка или обводка
    • Анимации — плавная, tada, jelly, pulse, с поворотом
  • Переключатель в стиле iOS
  • Адаптивность
  • Отсутствие javascript
  • Кастомный иконочный шрифт
  • Поддержка изображений
  • SVG иконки
  • Возможность переключения между иконками\svg\изображениями 
  • «Блокировка» для input type=»checkbox»
  • Поведения — focus, hover, indeterminate
  • Поддержка фреймворков таких как Bootstrap, Foundation, Semantic UI, Bulma . ..
  • Кастомизация с помощью SCSS 
  • Поддержка всех современных браузеров, в том числе мобильных устройств
  • Стили для печати

Установка

Установка через npm или yarn

> npm install pretty-checkbox // or
> yarn add pretty-checkbox

После этого добавить pretty-checkbox.min.css в html

Подключение без скачивания через CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css"/>

Ручная загрузка

Загрузка исходного кода с GitHub 

SCSS

Также можете подключить pretty-checkbox.scss в ваш главный scss файл

@import '~pretty-checkbox/src/pretty-checkbox.scss';

Использование

Pretty Checkbox имеет множество встроенных стилей:

Название класса Описание
p-default Базовый стиль
p-switch  Переключатель в стиле iOS
p-icon Для вставки иконочного шрифта
p-svg Для вставки svg файла или разметки
p-image Для вставки изображения

И три возможных формы: p-round, p-curve, p-square (по умолчанию)

Пример кастомизированного чекбокса на codepen

See the Pen default pretty-checkbox by Alexey (@leshkacho) on CodePen.

Базовый чекбокс имеет три варианта начертания p-fill p-thick p-outline (по умолчанию)

Эти стили можно комбинировать:

See the Pen basic styles and combines pretty-checboxes by Alexey (@leshkacho) on CodePen.

Рассмотрим checkbox в виде переключателя в стиле iOS

See the Pen KZwoyq by Alexey (@leshkacho) on CodePen.

Вставка иконок, svg, и картинок

<!--Иконочный шрифт-->
	  <div>
		<input type="checkbox">
		<div>
		  <i></i>
		  <label>Check me</label>
		</div>
	  </div>
<!--svg-->
	  <div>
		<input type="checkbox">
		<div>
		  <img src="file.
 
 svg" />
		  <label>Check me</label>
		</div>
	  </div> <!--Так же поддерживается вставка svg с помощью тегов в тело документа-->
<!--Картинка-->
  <div>
    <input type="checkbox" />
    <div>
      <img src="/check.png" />
      <label>Block</label>
    </div>
  </div>

Цветовая схема

Существует 5 основных цветов для отображения чекбокса: p-primary p-success p-warning p-info p-danger

А так же 5 цветов для линии обводки

p-primary-o p-success-o p-warning-o p-info-o p-danger-o

Подробное представление:

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 ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.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 (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

912193.11
2.119.53.1
Браузеры

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

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

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

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

См. также

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

Флажок — Spectrum CSS

Направление

Версия Vars

Статус компонента

Вклад

Последний выпуск 11 мая 2023 г.
Текущая версия @spectrum-css/checkbox @6.0.29

Веб-сайт Spectrum

GitHub

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

Стандартный

Проверенный

По умолчанию
Флажок
Флажок
Флажок

Неверный
Флажок
Флажок
Флажок

Отключено
Флажок
Флажок
Флажок

Только чтение
Флажок
Флажок
Флажок

Показать разметку 

 

  <дел>
     
По умолчанию
 
    <метка>
      <тип ввода="флажок">
      <диапазон>
        
        
      
      Флажок
    
    

    <метка>
      <тип ввода = "флажок" отмечен>
      <диапазон>
        
        
      
      Флажок
    
    

    <метка>
      <тип ввода="флажок">
      <диапазон>
        
        
      
      Флажок
    
  

  <дел>
     
Неверно
 
    <метка>
      <тип ввода="флажок">
      <диапазон>
        
        
      
      Флажок
    
    

    <метка>
      <тип ввода = "флажок" установлен>
      <диапазон>
        
        
      
      Флажок
    
    

    <метка>
      <тип ввода="флажок">
      <диапазон>
        
        
      
      Флажок
<дел>
Отключено
<метка> <тип ввода = "флажок" отключен> <диапазон> Флажок
<метка> <диапазон> Флажок
<метка> <тип ввода = "флажок" отключен> <диапазон> Флажок
<дел>
Только для чтения
<метка> <тип ввода = "флажок" отключен> <диапазон> Флажок
<метка> <диапазон> Флажок
<метка> <тип ввода = "флажок" отключен> <диапазон> Флажок