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

Leave a Comment / Css / By alexxlab / 08.09.1977

Содержание

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

Псевдо-checkbox на чистом CSS без фоновых изображений

Как сделать красивый стилизованный чекбокс и при этом не написать ни строчки javascript и не искать иконки.

это обычный чекбокс а это — стилизованный

Вот как выглядит код стилизованного чекбокса:

<label>
<input type=»checkbox»>
<span>а это — стилизованный</span>
</label>

input[type=checkbox] { display: none; }

. pseudocheckbox::before {
content: «\00A0»;
display: inline-block;
box-sizing: border-box;
width: 20px;
height: 20px;
background-color: white;
border: 2px solid #B0B0B0;
border-radius: 2px;
margin-right: 6px;
vertical-align: baseline;

text-align: center;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: #808080;
}

input[type=checkbox]:checked + .pseudocheckbox::before { content: «\2713»; }

Разберем этот код подробно.

Задействуем <label>

Для начала нужно скрыть сам чекбокс:

input[type=checkbox] { display: none; }

Его и относящийся к нему текст нужно заключить в label, чтобы клик мыши по тексту приводил к изменению состояния чекбокса:

<label>
<input type=»checkbox»>
<span>а это — стилизованный</span>
</label>

Мы, однако, не только поместили текст внутрь <label>, но и обернули его в <span>. Для чего же это нужно?

Селектор соседа и псевдокласс :checked

В CSS есть селектор соседа. Он позволяет применить стили к указанному элементу только в том случае, если прямо перед ним есть некоторый другой элемент. Записывается он с помощью символа + и выглядит, например, вот так:

input[type=checkbox] + span { (правила) }

Вышеуказанная запись означает: применить правила ко всем <span>, перед которыми есть <input type=»checkbox»>.

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

input[type=checkbox]:checked + span { (правила) }

Такая запись позволяет визуально выделить конкретно те <span>, которые следуют за включенными чекбоксами. Эффект от такого выделения иллюстрирует простейший пример:

<label>
<input type=»checkbox»>
<span>щелкни по мне</span>
</label>

input[type=checkbox]:checked + span { font-weight: bold; }

Вот как получится:

щелкни по мне

(Заметим, что <span> вместе с <input type=checkbox> находится внутри <label>, поэтому клик по нему приводит к изменению состояния <input>.

)

Селектор в исходном примере выглядит немного по-другому: не
input[type=checkbox]:checked + span, а
input[type=checkbox]:checked + .pseudocheckbox. По такому селектору браузер быстрее найдет нужный элемент: ему легче искать среди элементов класса pseudocheckbox, чем среди всех <span>. Так что класс добавлен для повышения производительности и никакой другой смысловой нагрузки не несет.

Стилизуем ::before

Вернемся к нашей задаче. Нам требуется не выделять сам <span>, а добиться, чтобы слева от него появилось нечто похожее на переключатель. Для этого нам поможет псевдоэлемент ::before.

::before — это способ дописать что-то в элемент непосредственно перед его содержимым средствами CSS.

div::before { content: «Это ::before «; }

раз

два

Современные браузеры позволяют стилизовать ::before так же, как это делается для обычных HTML-элементов: задавать размеры и отступы, добавлять границы, фон и т.

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

.pseudocheckbox::before {
content: «\00A0»;
display: inline-block;
box-sizing: border-box;
width: 20px;
height: 20px;
background-color: white;
border: 2px solid #B0B0B0;
border-radius: 2px;
margin-right: 6px;
vertical-align: baseline;

text-align: center;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: #808080;
}

content — свойство, необходимое псевдоэлементу, чтобы он проявился. Достаточно даже пустой строки. Но мы используем неразрывный пробел (об этом будет рассказано ниже). Его шестнадцатеричный код — 00A0:

content: «\00A0»;

Нужно задать нашему «квадратику» ширину и высоту. Чтобы они подействовали, необходимо также указать display: inline-block; (по умолчанию у ::before — inline):

display: inline-block;
width: 20px;
height: 20px;

Удобней, чтобы ширина и высота рассчитывались с учетом толщины границ:

box-sizing: border-box;

Которые тут же и укажем вместе с закруглениями для красоты:

border: 2px solid #B0B0B0;
border-radius: 2px;

И добавим небольшой отступ от текста:

margin-right: 6px;

Следует также обратить внимание на выравнивание самого «квадратика» относительно соседнего текста. Одним из подходящих вариантов является выравнивание по базовой линии текста:

vertical-align: baseline;

В случае самого «квадратика» текстом является неразрывный пробел. Если бы текста внутри не было (content: «»), такое выравнивание не подействовало бы. Вот почему в content именно неразрывный пробел, а не пустая строка: выглядят они одинаково, а действуют в данном случае по-разному.

Остальные свойства относятся к переключателю в состоянии «включено».

Состояние «включено» и Unicode-символ «галочка»

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

input[type=checkbox]:checked + .pseudocheckbox::before { … }

Отмеченный переключатель обычно имеет внутри «галочку». Здесь нам на помощь приходит разнообразие символов Unicode, которое выходят далеко за пределы собственно букв и цифр. Есть среди этого многообразия и несколько значков для «галочки».

Код значка мы запишем в свойство content:

input[type=checkbox]:checked + .pseudocheckbox::before { content: «\2714»; }

В результате «галочка» будет вписана во все «квадратики» рядом с отмеченными чекбоксами, чего мы и добивалсь. Однако, не стоит забывать, что технически такая «галочка» — это обычный текстовый символ, который самостоятельно может и не выглядеть ровно так, как надо, и ему нужно ему в этом немного помочь.

Центрируем по горизонтали:

text-align: center;

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

font-family: Arial, sans-serif;
font-size: 16px;

Кроме размера нужно добиться необходимого положения символа внутри квадратика по вертикальной оси. Лучше всего это делать с помощью line-height:

line-height: 16px;

line-height нужно подбирать индивидуально для каждого сочетания размера и семейства шрифта.

При выравнивании по базовой линии текста (vertical-align: baseline) именно значение line-height определеяет, где, собственно, будет нижняя граница текста у «квадратика». Если эти значения у отмеченного и неотмеченного будут отличаться, то они окажутся выровненными по-разному (так может получиться, например, если явно указать line-height только у отмеченного). Поэтому line-height лучше указывать в общем блоке стилей для ::before.

line-height обычно подбирают вместе с font-size, поэтому его удобно иметь в блоке стилей рядом. font-size, в свою очередь, может подбираться вместе с другими параметрами текста. Так что все их удобней перенести в общий блок для ::before, хотя, на первый взгляд, правила стилизации текста там выглядит нелогично, т.к. самого текста там нет.

Напоследок добавим жирность и укажем цвет:

font-weight: bold;
color: #808080;

© Все права на данную статью принадлежат порталу webew.ru. Перепечатка в интернет-изданиях разрешается только с указанием автора и прямой ссылки на оригинальную статью. Перепечатка в печатных изданиях допускается только с разрешения редакции.

HTML и CSS с примерами кода

Псевдокласс :checked находит любые элементы radio (<input type="radio">), checkbox (<input type="checkbox">) или option (<option> внутри <select>), которые выбраны или включены.

Пользователь может изменить это состояние, нажав на элемент, или выбрав другое значение, в этом случае :checked повторно не применится к элементу, а сохранится.

Псевдоклассы

:active
:any-link
:blank
:checked
:current()
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:focus
:focus-visible
:focus-within
:fullscreen
:future
:has()
:host
:host()
:host-context()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:left
:link
:local-link
:not()
:nth-child()
:nth-col()
:nth-last-child()
:nth-last-col()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:target
:target-within
:user-invalid
:valid
:visited
:where()

Синтаксис

/* Matches any checked/selected radio, checkbox, or option */
:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

Спецификации

HTML Living Standard
HTML 5
Selectors Level 4
CSS Basic User Interface Module Level 3
Selectors Level 3

Описание и примеры

Пример 1

HTML

<div>
  <input type="radio" name="my-input" />
  <label for="yes">Yes</label>
  <input type="radio" name="my-input" />
  <label for="yes">No</label>
</div>
<div>
  <input type="checkbox" name="my-checkbox" />
  <label for="opt-in">Check me!</label>
</div>
<select name="my-select">
  <option value="opt1">Apples</option>
  <option value="opt2">Grapes</option>
  <option value="opt3">Pears</option>
</select>

CSS

div,
select {
  margin: 8px;
}
/* Labels for checked inputs */
input:checked + label {
  color: red;
}
/* Radio element, when checked */
input[type='radio']:checked {
  box-shadow: 0 0 0 3px orange;
}
/* Checkbox element, when checked */
input[type='checkbox']:checked {
  box-shadow: 0 0 0 3px hotpink;
}
/* Option elements, when selected */
option:checked {
  box-shadow: 0 0 0 3px lime;
  color: red;
}

Пример 2: переключение элементов со скрытым флажком

В этом примере используется псевдо-класс :checked, чтобы пользователь мог переключать контент на основе состояния флажка, без использования JavaScript.

HTML

<input type="checkbox" />
<table>
  <thead>
    <tr>
      <th>Column #1</th>
      <th>Column #2</th>
      <th>Column #3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr>
      <td>[cell text]</td>
      <td>[cell text]</td>
      <td>[cell text]</td>
    </tr>
    <tr>
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
    <tr>
      <td>[more text]</td>
      <td>[more text]</td>
      <td>[more text]</td>
    </tr>
  </tbody>
</table>
<label for="expand-toggle">Toggle hidden rows</label>

CSS

/* Hide the toggle checkbox */
#expand-toggle {
  display: none;
}
/* Hide expandable content by default */
. expandable {
  visibility: collapse;
  background: #ddd;
}
/* Style the button */
#expand-btn {
  display: inline-block;
  margin-top: 12px;
  padding: 5px 11px;
  background-color: #ff7;
  border: 1px solid;
  border-radius: 3px;
}
/* Show hidden content when the checkbox is checked */
#expand-toggle:checked ~ * .expandable {
  visibility: visible;
}
/* Style the button when the checkbox is checked */
#expand-toggle:checked ~ #expand-btn {
  background-color: #ccc;
}

91 Чекбоксы CSS

Коллекция бесплатных HTML и пользовательских флажков CSS примеров: с изображением, с меткой, флажком и т. д. . Обновление коллекции февраля 2020 года. 8 новых предметов.

Флажки Bootstrap
Флажки jQuery