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

Leave a Comment / Css / By /

Содержание

checkbox / desktop / 5.0.0 / bem-components / Классические БЭМ-библиотеки / Библиотеки / БЭМ

Используется для управления параметром выбора с двумя состояниями – «включено» и «выключено».

Обзор блока

Модификаторы блока

МодификаторДопустимые значенияСпособы использованияОписание
type'button'BEMJSONТип чекбокса.
checkedtrueBEMJSON, JSВыбор чекбокса.
disabledtrueBEMJSON, JSНеактивное состояние.
focusedtrueBEMJSON, JSФокус на блоке.
hoveredtrue–Наведение курсором.
theme'islands'BEMJSONСтилевое оформление.
size'm', 'l'BEMJSONРазмер чекбокса. Используется для чекбоксов с модификатором theme в значении islands.

Специализированные поля блока

ПолеТипОписание
nameStringУникальное имя чекбокса.
valString, NumberЗначение чекбокса, которое будет отправлено на сервер, если он выбран.
textStringТекст подписи к чекбоксу.
iconBEMJSONИконка. Формируется блоком icon. Используется для чекбокса с модификатором type в значении button.
titleStringТекст всплывающей подсказки. Используется для чекбокса с модификатором type в значении button.
tabIndexNumberПоследовательность перехода между контролами при нажатии на Tab.

Описание блока

Примечание HTML-атрибут autocomplete принудительно переведен в состояние off для обеспечения корректной работы блока.

Модификаторы блока

Модификатор
type

Допустимое значение: 'button'.

Способ использования: BEMJSON.

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

Модификатор
checked

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Используется для выбора чекбокса.

Модификатор
disabled

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Отвечает за неактивное состояние, при котором блок виден, но недоступен для действий пользователя.

Модификатор
focused

Допустимое значение: true.

Способы использования: BEMJSON, JS.

Отвечает за наличие фокуса на блоке.

Выставляется автоматически при получении блока фокуса.

{
    block : 'button',
    mods : { theme : 'islands', size : 'm', focused : true },
    text : 'В фокусе'
}

Способ установки фокуса на блок определяет выбор модификатора: focused или focused-hard. Читать подробности.

Модификатор
hovered

Допустимое значение: true.

Способы использования: – .

Выставляется блоку автоматически, когда курсор мыши находится в пределах контрола.

Модификатор
theme

Допустимое значение: 'islands'.

Способ использования: BEMJSON.

Отвечает за стилевое оформление блока.

Необходимо использовать с модификатором size.

Модификатор
size

Допустимые значения для темы islands: 'm', 'l'.

Способ использования: BEMJSON.

Задает размер блока.

Необходимо использовать с модификатором theme в значении islands.

m

l

Специализированные поля блока

Поле
name

Тип: String.

Определяет уникальное имя чекбокса.

Поле
val

Тип: String, Number.

Значение чекбокса, которое будет отправлено на сервер.

Поле
text

Тип: String.

Определяет текст подписи к чекбоксу или текст кнопки, если указан модификатор type в значении button.

Поле
icon

Тип: BEMJSON.

Определяет иконку, которая отображается с помощью блока icon.

Используется только для чекбокса с модификатором type в значении button.

Поле
title

Тип: String.

Определяет содержание всплывающей подсказки. Вид такой подсказки зависит от браузера, настроек операционной системы и не может быть изменен с помощью HTML-кода или стилей.

Используется только для чекбокса с модификатором type в значении button.

Поле
tabIndex

Тип: Number.

Определяет порядок получения фокуса при переходе между контролами с помощью клавиши Tab.

Стилизация checkbox и radio

HTML формы имеют множество элементов. Среди них особенно выделяются checkbox и radio кнопки. В данной статье я покажу как легко можно изменить их внешний вид применив возможности одного лишь CSS.

Оглавление

  • Оформление чекбокса
    • CSS-стили для чекбокса
  • Оформление radio-кнопки
    • CSS-стили для радио-кнопки

    • Стилизация checkbox и radio кнопок является очень распространенной практикой в web-дизайне. В этой статье я покажу как применив CSS, стилизовать данные элементы кроссбраузерно.

    Для начала определимся с логикой, что нам нужно учитывать при стилизации чекбоксов и радио-кнопок:

    1. Помимо самих элементов которые мы будем стилизовать (<input type="checkbox"> и <input type="radio">), нам понадобится тег <label>, благодаря которому переключать элемент можно будет кликая на текст, а не только на сам элемент.
    2. Тег <input> должен находиться до тега <label> . В этом случае состояние элемента формы переключается с помощью атрибута for.

    «Магия» заключается в использовании псевдоселекторов :checked и :not. При этом сам чекбокс или радио-кнопка делаются невидимыми, а их эмуляция осуществляется с помощью псевдоэлементов :before и :after для тега <label>.

    Оформление чекбокса

    HTML разметка для чекбокса будет выглядеть следующим образом:

    <!-- Стилизация checkbox  -->
<div>
    <input type="checkbox" />
    <label for="checkbox1">Checkbox 1</label>
</div>
<div>
    <input type="checkbox" />
    <label for="checkbox2">Checkbox 2</label>
</div>

    Еще раз — тег <input> обязательно должен быть расположен перед тегом <label>

    . Если вы поменяете их местами, ничего работать не будет.

    CSS-стили для чекбокса:

    .element-wrapper {
    padding: 10px;
}
/* 
//////////////////////
Стилизация checkbox 
//////////////////////
*/
.checkbox {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
.checkbox + label {
    position: relative;
    vertical-align: middle;
    padding: 0 0 0 30px;
    cursor: pointer;
}
/* Чекбокс в состоянии неактивен */
.checkbox + label:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 19px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
}
/* Чекбокс в состоянии активен */
.checkbox + label:after {
    content: '';
    position: absolute;
}
/* Фон чекбокса в состоянии активен */
.checkbox:checked + label:after {
    position: absolute;
    top: 2px;
    left: 3.2px;
    border: 1px solid white;
    background: #413548;
    height: 14px;
    width: 14px;
}

    Результат:

    Смотреть пример Оформление чекбокса от webinmind. ru (@webinmind).

    Оформление radio-кнопки

    HTML разметка для радио-кнопок будет выглядеть следующим образом:

    <!-- Стилизация radio  -->
<div>
    <input type="radio" name="radio" />
    <label for="radio1">Radio 1</label>
</div>
<div>
    <input type="radio" name="radio" />
    <label for="radio2">Radio 1</label>
</div>

    И опять — тег <input> обязательно должен быть расположен перед тегом <label>.

    CSS-стили для радио-кнопки:

    .element-wrapper {
    padding: 10px;
}
/* 
//////////////////////
Стилизация radio 
//////////////////////
*/
.radio {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 7px;
}
.radio + label {
    position: relative;
    padding: 0 0 0 30px;
    cursor: pointer;
}
/* Оформление радио-кнопки */
.radio + label:before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 50%;
    background: #FFF;
}
/* Радио в состоянии неактивен */
.
     
     radio + label:after {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 3.5px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #413548;
    opacity: 0;
    transition: .2s;
}
.radio:checked + label:after {
    opacity: 1;
}

    Результат:

    Смотреть пример Оформление radio-кнопки от webinmind.ru (@webinmind).

    Вот таким образом можно кроссбраузерно стилизовать стандартный вид чекбоксов и радио-кнопок, применив при этом только лишь инструмент CSS. Кстати, рекомендую прочитать статью про кастомизацию скроллбара браузеров на движке WebKit.

    Благодарность автору

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

    • ЮMoney (Яндекс.Деньги)

    Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс. Деньги.

    Время работы: 0,1235 s
    Время запросов: 0,1235 s
    Количество запросов: 25
    Источник: cache

    Авторская документация по web-разработке Web in Mind | © 2019 – 2022

    Как изменить цвет checkbox css

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

    Как осуществляется создание кастомного чекбокса или переключателя

    Данный процесс осуществляется посредством скрытия стандартного элемента и создания с помощью CSS другого «поддельного», такого как мы хотим .

    Но как же это будет работать, если стандартный input скрыть? Это можно выполнить благодаря тому, что в HTML переключить состояние checked можно не только с помощью самого элемента input , но и посредством связанного с ним label .

    В HTML связывание label с input выполняется одним из 2 способов:

    1. Посредством помещения элемента input в label :

    2. Посредством задания элементу input атрибута id , а label – for с таким же значением как у id .

    В этой статье мы подробно разберём шаги по кастомизации checkbox и radio , в которых label с input свяжем по 2 варианту. Создание «поддельного» чекбокса выполним с использованием псевдоэлемента ::before , который поместим в label . При этом никакие дополнительные элементы в разметку добавлять не будем.

    Создание стильного чекбокса

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

    Шаг 1. Создадим разметку.

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

    В этом примере элемент label расположен после input . Связь label с input осуществляется посредством соответствия значения for элемента label с id элемента input .

    В примере к элементу input добавлен класс custom-checkbox . Данный класс мы будем использовать при составлении селекторов и тем самым с помощью него определять элементы к которым следует добавить стилизованный чекбокс вместо обычного. Т.е. его присутствие или отсутствие будет определять с каким чекбоксом (со стандартным или поддельным) будет выводится элемент input с type=»checkbox» .

    Шаг 2. Напишем стили для скрытия стандартного элемента input .

    Мы не будем использовать display: none , а установим ему стили, с помощью которых уберём его из потока ( position: absolute ), поместим его ниже существующих элементов ( z-index: -1 ), а также сделаем его полностью прозрачным ( opacity: 0 ). Зачем это нужно? Это нам необходимо для того, чтобы мы могли получить состояние фокуса, а затем стилизовать «подделный» checkbox или radio , когда он будет находиться в нём.

    Шаг 3. Создадим поддельный чекбокс.

    Создание «поддельного» чекбокса выполним с помощью псевдоэлемента ::before . Посредством CSS зададим ему размеры (в данном случае 1em x 1em ), а затем нарисуем его с помощью border: 1px solid #adb5bd . Свойства начинающие со слова background будут определять положение самого флажка (когда checkbox будет в состоянии checked ).

    Первое правило необходимо для вертикального центрирования флажка и надписи к нему. Это действие в примере выполнено через CSS Flexbox.

    Шаг 4. Создадим стили при нахождении элемента в состоянии checked .

    В этом коде при получении элементом состояния checked применим к псевдоэлементу ::before находящемуся в label стили, посредством которых установим цвет границы, цвет фону и фоновую картинку (флажок) в формате svg.

    Шаг 5. Добавим код для стилизации чекбокса при нахождении его в состояниях hover , active , focus и disabled .

    Разработка кастомного переключателя

    Стилизация переключателя ( input с type=»radio» ) выполняется аналогично, т.е. посредством тех же шагов которые мы применяли при кастомизации чекбокса.

    Стилизация Checkbox

    Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.

    Метод «Checkbox Hack»

    Стоит заменить что в некоторых старых браузерах (например Safari) такой приём не работает и требует добавление атрибутов for у <label> и id у чекбокса.

    В зависимости от состояния чекбокса :checked , :disabled и :focus , следующему за ним элементу, например <span> , можно задавать стили с помощью селектора « + ».

    Сам чекбокс скрывается, но без использования display: none , что бы оставить функциональность фокуса.

    По умолчанию, фокус появляется при клике на элемент, что не очень и нужно. Оставить выделение при фокусе только при нажатии клавиши Tab можно с помощью JQuery, добавляя класс focused родительскому элементу.

    Пример №1

    В первом примере понадобятся два изображения (обычный и отмеченный), для ускорения прорисовки можно использовать спрайты, но тогда не сделать плавную смену при переключении ( transition background ).

    CSS Checkbox Styling — изменение цвета размера

    Я пытаюсь сделать простой стиль флажка. Смена цвета не работает.

    Как изменить цвет и границу?

    3 ответа

    Что вам нужно сделать, так это скрыть фактический элемент html флажка и создать новый, который можно легко стилизовать.

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

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

    Я также добавил отмеченную функцию, которая будет переключать другой флажок, когда установлен флажок Показать все.

    Изменить — обратите внимание, что вы можете использовать другие методы добавления значка — например, вы можете предпочесть значок font awesome fa-check.

    В настоящее время флажки нельзя стилизовать с помощью CSS, так как они обычно основаны на стилях по умолчанию операционной системы пользователя. Чтобы обойти это с помощью CSS, можно создать другой элемент, в вашем случае тег <label> , который будет служить визуальным индикатором флажка, а затем некоторый псевдоселектор и псевдоэлемент CSS для запуска изменения, когда ввод проверяется.

    Поскольку вход и метка связаны с помощью атрибутов id и for , сжатие скрытого входа работает эффективно и по-прежнему поддерживает доступность.

    Стиль флажка CSS | Как работает стиль флажка CSS? Примеры

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

    Синтаксис:

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