Html checkbox внешний вид

Стилизация Checkbox

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

Метод «Checkbox Hack»

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

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

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

/* Dafault */ label input[type=checkbox] + span < . >/* Focus */ label input[type=checkbox]:focus + span < . >/* Checked */ label input[type=checkbox]:checked + span < . >/* Disabled */ label input[type=checkbox]:disabled + span < . >label input[type=checkbox]:disabled:checked + span

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

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

$(window).keyup(function(e) < var target = $('label input[type=checkbox]:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('label input[type=checkbox]').focusout(function()< $(this).parent().removeClass('focused'); >);

Пример №1

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

HTML-разметка:

 Checkbox #1  Checkbox #2  Checkbox #3  Checkbox #4 

Фокус по клавише Tab:

$(window).keyup(function(e) < var target = $('.checkbox-other input:focus'); if (e.keyCode == 9 && $(target).length)< $(target).parent().addClass('focused'); >>); $('.checkbox-other input').focusout(function()< $(this).parent().removeClass('focused'); >);

CSS-стили:

.checkbox-other < display: block; margin: 0 0 10px 0; cursor: pointer; user-select: none; position: relative; >.checkbox-other input[type=checkbox] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-other span < display: inline-block; position: relative; padding: 0 0 0 35px; line-height: 22px; >.checkbox-other span:before < content: ""; display: inline-block; width: 22px; height: 22px; position: absolute; left: 0; top: 0; transition: background 0.3s ease; background: url(/checkbox-1.png) 0 0 no-repeat; >/* Checked */ .checkbox-other input[type=checkbox]:checked + span:before < background-image: url(/checkbox-2.png); >/* Focus */ .focused span:before < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-other span:hover:before < filter: brightness(110%); >/* Active */ .checkbox-other span:active:before < filter: brightness(80%); >/* Disabled */ .checkbox-other input[type=checkbox]:disabled + span < color: #666; cursor: default; >.checkbox-other input[type=checkbox]:disabled + span:before

Результат:

Пример №2

Подходит для случаев, когда галка выходит за края элемента. HTML-разметка и JS-код остается прежними.

.checkbox-other < display: block; margin: 0 0 10px 0; cursor: pointer; user-select: none; position: relative; >.checkbox-other input[type=checkbox] < position: absolute; z-index: -1; opacity: 0; display: block; width: 0; height: 0; >.checkbox-other span < display: inline-block; position: relative; padding: 0 0 0 35px; line-height: 22px; >.checkbox-other span:before < content: ""; display: inline-block; width: 22px; height: 22px; position: absolute; left: 0; top: 0; background: url(/checkbox-3.png) 0 0 no-repeat; >/* Checked */ .checkbox-other input[type=checkbox] + span:after < content: ""; opacity: 0; transition: opacity 0.3s ease; >.checkbox-other input[type=checkbox]:checked + span:after < display: inline-block; width: 22px; height: 22px; position: absolute; left: 4px; top: -5px; background: url(/checkbox-4.png) 0 0 no-repeat; opacity: 1; >/* Focus */ .focused span:before < box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); >/* Hover */ .checkbox-other span:hover:after < filter: brightness(110%); >/* Active */ .checkbox-other span:active:before, .checkbox-other span:active:after < filter: brightness(80%); >/* Disabled */ .checkbox-other input[type=checkbox]:disabled + span < color: #666; cursor: default; >.checkbox-other input[type=checkbox]:disabled + span:before, .checkbox-other input[type=checkbox]:disabled + span:after

Источник

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 . При этом никакие дополнительные элементы в разметку добавлять не будем.

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

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

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

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

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

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

.custom-checkbox { position: absolute; z-index: -1; opacity: 0; }

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

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

.custom-checkbox+label { display: inline-flex; align-items: center; user-select: none; } .custom-checkbox+label::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 0.25em; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }

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

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

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

.custom-checkbox:checked+label::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); }

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

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

/* стили при наведении курсора на checkbox */ .custom-checkbox:not(:disabled):not(:checked)+label:hover::before { border-color: #b3d7ff; } /* стили для активного состояния чекбокса (при нажатии на него) */ .custom-checkbox:not(:disabled):active+label::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для чекбокса, находящегося в фокусе */ .custom-checkbox:focus+label::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ .custom-checkbox:focus:not(:checked)+label::before { border-color: #80bdff; } /* стили для чекбокса, находящегося в состоянии disabled */ .custom-checkbox:disabled+label::before { background-color: #e9ecef; }

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

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

Итоговый набор стилей для кастомного оформления input с type=»radio» :

  Green

Ещё примеры по кастомизации checkbox и label

В этом разделе представлены следующие примеры:

1. Стилизация checkbox, когда input расположен в label .

/* для элемента input c type="checkbox" */ .custom-checkbox>input { position: absolute; z-index: -1; opacity: 0; } /* для элемента label, связанного с .custom-checkbox */ .custom-checkbox>span { display: inline-flex; align-items: center; user-select: none; } /* создание в label псевдоэлемента before со следующими стилями */ .custom-checkbox>span::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 0.25em; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } /* стили при наведении курсора на checkbox */ .custom-checkbox>input:not(:disabled):not(:checked)+span:hover::before { border-color: #b3d7ff; } /* стили для активного чекбокса (при нажатии на него) */ .custom-checkbox>input:not(:disabled):active+span::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для чекбокса, находящегося в фокусе */ .custom-checkbox>input:focus+span::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для чекбокса, находящегося в фокусе и не находящегося в состоянии checked */ .custom-checkbox>input:focus:not(:checked)+span::before { border-color: #80bdff; } /* стили для чекбокса, находящегося в состоянии checked */ .custom-checkbox>input:checked+span::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); } /* стили для чекбокса, находящегося в состоянии disabled */ .custom-checkbox>input:disabled+span::before { background-color: #e9ecef; }

2. Стилизация radio , когда input расположен в label .

/* для элемента input c type="radio" */ .custom-radio>input { position: absolute; z-index: -1; opacity: 0; } /* для элемента label связанного с .custom-radio */ .custom-radio>span { display: inline-flex; align-items: center; user-select: none; } /* создание в label псевдоэлемента before со следующими стилями */ .custom-radio>span::before { content: ''; display: inline-block; width: 1em; height: 1em; flex-shrink: 0; flex-grow: 0; border: 1px solid #adb5bd; border-radius: 50%; margin-right: 0.5em; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; } /* стили при наведении курсора на радио */ .custom-radio>input:not(:disabled):not(:checked)+span:hover::before { border-color: #b3d7ff; } /* стили для активной радиокнопки (при нажатии на неё) */ .custom-radio>input:not(:disabled):active+span::before { background-color: #b3d7ff; border-color: #b3d7ff; } /* стили для радиокнопки, находящейся в фокусе */ .custom-radio>input:focus+span::before { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */ .custom-radio>input:focus:not(:checked)+span::before { border-color: #80bdff; } /* стили для радиокнопки, находящейся в состоянии checked */ .custom-radio>input:checked+span::before { border-color: #0b76ef; background-color: #0b76ef; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); } /* стили для радиокнопки, находящейся в состоянии disabled */ .custom-radio>input:disabled+span::before { background-color: #e9ecef; }

Источник