Css стилизация radio: CSS стилизация checkbox и radio — 2 варианта

Библиотека для стилизации чекбоксов на чистом 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

Картинка вместо чекбокса | htmlbook.ru

Исходные чекбоксы в форме выглядят хотя и привычно, но уже несколько старомодно. Порой хочется вместо чекбокса использовать стильную картинку, которая лучше будет вписываться в существующий дизайн. С помощью CSS3 мы можем это сделать без всяких скриптов, при этом учтём и старые версии браузеров, в которых функционал формы должен сохраниться.

Для начала подготовим изображения. Нам потребуется две картинки соответствующие разному статусу чекбокса — когда он включен и выключен (рис. 1).

Рис. 1. Вверху чекбокс выключен, внизу он включен

Желательно объединить две картинки в одну в графическом редакторе, сделать из них так называемый CSS-спрайт. Дело в том, что первая картинка покажется сразу после загрузки, а вторая начнёт загружаться только после щелчка по чекбоксу. Несмотря на малый размер изображений и объём загружаемого файла, на загрузку и отображение картинки в первый раз потребуется какое-то время. Даже когда речь идёт о доли секунды эта задержка заметна визуально. Если же мы объединим рисунки в одно изображение, то оно будет загружаться целиком и показываться без малейшего замедления. Чтобы создать иллюзию того, что у нас одна картинка, а не две, надо ограничить размеры элемента и выводить изображение в виде фона. И в нужный момент просто-напросто смещать фон вверх или вниз.

HTML

После того, как спрайт сделан, перейдём к HTML-коду. Он содержит три важных элемента.

<label><input type="checkbox" value="1" name="k"><span></span></label>

Первый это тег <label>, он создаёт вокруг чекбокса невидимую рамку, щелчок внутри которой включает или выключает галочку в чекбоксе. Его наличие позволяет не щёлкать непосредственно по чекбоксу, размеры которого довольно малы, а щёлкать за пределами чекбокса. При этом всё будет работать именно так, как нам и нужно, даже несмотря на то, что по самой галочке мы не попали.

Далее идёт сам чекбокс (<input type=»checkbox»>) со всеми желаемыми параметрами. Здесь никаких ограничений нет, вставляйте в тег любые необходимые атрибуты.

После <input> следует пустой <span>, этот элемент будет выполнять декоративную роль, именно к нему и применяется наш рисунок.

CSS

Для начала определим размер отображаемого рисунка. У меня он составляет 32х26 пикселов. Заметьте, здесь речь идёт не о спрайте, где у нас объединено две картинки, а об одном изображении. Эти размеры подставляем в стиль селектора label.

label {
 width: 32px; /* Ширина рисунка */
 height: 26px; /* Высота рисунка */
 display: block; /* Блочный элемент */
 position: relative; /* Относительное позиционирование */
}

Стиль чекбокса не трогаем, он в любом случае не будет виден и переходим к нашему «декоративному» <span>. Важно сделать чтобы элемент занимал всю доступную область внутри <label>. Для этого задаём абсолютное позиционирование и устанавливаем ширину и высоту как 100% от родителя. Заодно смещаем элемент в левый верхний угол.

input[type="checkbox"] + span {
 position: absolute; /* Абсолютное позиционирование */
 left: 0; top: 0;
 width: 100%; height: 100%;
 background: url(images/switch.png) no-repeat; /* Фоновый рисунок */
 cursor: pointer; /* Курсор в виде руки */
}

Картинка добавляется как фон, здесь никаких сюрпризов нет, и меняем для разнообразия форму курсора.

На этом этапе наш чекбокс уже превратился в симпатичную картинку, осталось только задать смену рисунка, когда внутри чекбокса стоит галочка. Для этого воспользуемся псевдоклассом :checked, он срабатывает при установке галочки в поле. Правда тут есть одна хитрость. :checked применяется к чекбоксу, а менять его стиль необходимости нет, нас интересует только «декоративный» span. Поэтому используем соседние селекторы и добавляем стиль к span идущему после чекбокса с галочкой.

input[type="checkbox"]:checked + span  	{
 background-position: 0 -26px;
}

Надеюсь, теперь стало понятно такое положение <span> в HTML-коде, как раз для того, чтобы его легко стилизовать с помощью псевдокласса :checked.

Собираем код воедино (пример 1) и тестируем его в браузерах.

Пример 1. Картинка вместо чекбокса

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Переключатель</title>
  <style>
   label {
    width: 32px;
    height: 26px;
    display: block;
    position: relative;
   }
   input[type="checkbox"] + span {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    background: url(images/switch.  png) no-repeat;
    cursor: pointer;
   }
   input[type="checkbox"]:checked + span {
    background-position: 0 -26px; 
   }
  </style>
 </head>
 <body>
  <form>
   <label><input type="checkbox" value="1" name="k"><span></span></label>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

Браузеры

Все современные версии браузеров — Firefox, Chrome, IE9, Opera, Safari показали одинаковый рабочий результат.

Также код не будет работать в IE8, эта версия не понимает :checked. Давайте сделаем поддержку старых версий IE, для чего вернём настройки элементов формы по умолчанию. Для начала к элементам желательно добавить классы и в стилях обращаться именно к ним. Так мы сможем задать стиль любого элемента без обращения к псевдоклассам CSS3.

<label><input type="checkbox" value="1" name="k"><span></span></label>

Чтобы в стилях затронуть версии IE младше 9.

0 воспользуемся условными комментариями. В стилях остаётся задать ширину и высоту для label по умолчанию и скрыть span (пример 2).

Пример 2. Стиль для IE8

<!--[if lt IE 9]>
 <style>
  label.switch {width: auto; height: auto; }
  span.switch { display: none !important; }
 </style>
<![endif]-->

Данный код надо вставить сразу после закрывающего тега </style> в примере 1. Таким образом мы получим классический вид чекбоксов в IE7-8 и меняющуюся картинку в современных браузерах.

CSS3формы

CSS по теме

• Псевдокласс :checked

3 способа стилизовать радиокнопки с помощью современного CSS

Стилизация собственных элементов радио-ввода в кросс-браузере немного более болезненна, чем должна быть. На протяжении многих лет эта тема обсуждалась во множестве блогов и предлагались различные обходные пути. Большинство решений включают отображение дополнительных псевдоэлементов, таких как

.

 [тип=радио]:проверено::до,
[type=checkbox]:checked::before {
  содержание: "";
  ширина: 14 пикселей;
  высота: 14 пикселей;
  цвет фона: #ffa500;
  положение: абсолютное;
  верх: 2px;
  слева: 2px;
}
 

Современный CSS спешит на помощь

С помощью простого и современного CSS мы можем теперь еще проще стилизовать радиокнопку для ввода элементов. Ниже приведены три различных варианта, каждый из которых имеет свои плюсы и минусы. Вы можете попробовать различные варианты в CodePen ниже.

См. радиокнопки Pen
Styled от Bryntum (@bryntum)
на CodePen.

Использование акцентного цвета

Свойство CSS Accent-Color применяет стиль к некоторым нативным элементам, изменяя их акцентный цвет. Это свойство широко поддерживается в 2022 году. Но оно поддерживается не полностью, и большинство браузеров начали поддерживать его только в 2021 году.

 кузов {
  акцент-цвет: красный;
} 

Плюсы

• Простота использования

Минусы

• Низкий стиль
• Не полностью поддерживается

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

Как box-shadow, так и контур решения достигаются за счет скрытия собственного внешнего вида элемента. А затем, комбинируя фон, границу и внешний круг, мы создаем новый внешний вид, который будет легче стилизовать.

 ввод {
  /* Родной внешний вид скрыт */
  внешний вид: нет;
  -webkit-внешний вид: нет;
  /* Для круглого вида нам нужен радиус границы. */
  радиус границы: 50%;
  /* Фон будет цветом радиоточки. */
  фон: #FF572233;
  /* Границей будет расстояние между точкой и внешним кругом */
  граница: 3px сплошная #FFF;
  /* Создав box-shadow без смещения и размытия, мы получили внешний круг */
  box-shadow: 0 0 0 1px #FF5722;
} 

Обратите внимание, что в некоторых случаях box-shadow может обрезаться своим контейнером. В этих случаях маржа может быть хорошим решением.

Плюсы

• Полная поддержка
• Высокая стильность

Минусы

• Плохо масштабируется в некоторых средах.

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

Решение контура использует тот же метод, что и решение box-shadow, но вместо этого создает внешний круг, используя свойство контура. Outline широко поддерживается, но не в сочетании с радиусом границы, который не работает должным образом в Safari.

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

 ввод {
  внешний вид: нет;
  -webkit-внешний вид: нет;
  радиус границы: 50%;
  фон: #e8e8e8;
  граница: 3px сплошная #FFF;
  /* Контур будет внешним кругом */
  контур: 1px сплошной #999;
} 

Плюсы

• Масштабируется лучше, чем box-shadow
• Высокая стильность
• Не влияет на макет

Минусы

• Safari не поддерживается.

Какой выбрать?

В грядущем выпуске 5.1 мы в Bryntum решили использовать опцию `box-shadow` в нашем виджете переключателя. Он обеспечивает надежный кросс-браузерный внешний вид и совместим с более старыми браузерами. Вы можете увидеть это в действии в диалоговом окне разрешения конфликтов в Scheduler Pro.

Стилизация переключателей и флажков в HTML-формах

Поиск

11 ноября 2021 г.

В этой серии статей о веб-формах мы узнали, как создавать и стилизовать различные элементы управления форм. В последней части рассказывалось, как стилизовать метки и кнопки, а также как изменить внешний вид элемента в зависимости от взаимодействия с пользователем.

В сегодняшней статье мы узнаем, как стилизовать пару общеизвестно сложных элементов управления: радиокнопки и флажки.

Однако, прежде чем мы продолжим, вы можете освежить свою память, просмотрев предыдущие статьи этой серии:

• Как создавать веб-формы в HTML
• Создание веб-форм в HTML: часть 2
• Стилизация элементов управления формы с помощью CSS — часть 3
• CSS для меток, кнопок и взаимодействий с формами — часть 4

Общая стратегия

Причина, по которой я назвал радиокнопки и флажки «известно сложными» во вступлении, заключается в том, что они практически не зависят от стилей CSS. Обычные атрибуты, которые, по вашему мнению, должны применяться к переключателям и флажкам, такие как border , color и background-color , ничего не делают! Сказав это, есть несколько способов обойти эти ограничения, чтобы настроить ваши переключатели и флажки различными привлекательными способами.

В настоящее время наиболее распространенной стратегией настройки переключателей и флажков является:

1. Скрыть элемент ввода.
2. Добавьте дополнительный элемент span и примените собственный стиль, создав класс.

В оставшейся части этой статьи будет рассмотрено несколько примеров.

Стилизация радиокнопок с помощью CSS

Без стилей CSS радиокнопки отображаются в виде белого круга с черной или синей точкой при выборе (в зависимости от браузера):

 

Это HTML-разметка, которая создала приведенную выше форму:

 
Стили элементов управления формы
 
<имя формы="регистрация">
  <набор полей>
    
Переключатели
      
Пожалуйста, выберите свою любимую начинку для пиццы:
      <дел>
        
        Пепперони label>
        
        Грибы
        
        Другое
      

 .divCSS > input[type="radio"] {
  -webkit-внешний вид: нет;
  -моз-внешний вид: нет;
  внешний вид: нет;
  /* ... */
}
 

 .divCSS > input[type="radio"] {
  /* удалить стандартный внешний вид фона... */

  /* создаем внешний вид радиокнопки */
  отображение: встроенный блок;
  ширина: 15 пикселей;
  высота: 15 пикселей;
  отступ: 3px;
  фоновый клип: поле содержимого;
  граница: 2px сплошная #060c3b;
  радиус границы: 50%;
  поле справа: 0;
}
 

 . divCSS > input[type="radio"]:checked {
  цвет фона: синий;
}
 

 .divCSS {
  семейство шрифтов: Arial, Helvetica, без засечек;
  цвет: #060c3b;
  вес шрифта: 500;
}

.divCSS > метка {
  поле справа: 4px;
}
 

 .divCSS > input[type='radio']:hover {
    box-shadow: 0 0 5px 0px синяя вставка;
}

. divCSS > input[type='radio']:focus {
   контур: 1px сплошной зеленый;
}
 

 

  
Флажки
    
Пожалуйста, выберите ваши любимые начинки для пиццы:
    <дел>
      <метка>
        <тип ввода = "флажок" />
        Пепперони
      
      <метка>
        <тип ввода = "флажок" />
        Грибы
      
      <метка>
        <тип ввода = "флажок" />
        Другое