Как обрабатывать события html checkbox

Пример 5: Анимированный переключатель день/ночь

CSS оформление

.toggle{display:block;text-align:center;margin-top:40px;user-select:none}
.toggle--checkbox{display:none}
.toggle--btn{display:block;margin:0 auto;font-size:1.4em;transition:all 350ms ease-in}
.toggle--btn:hover{cursor:pointer}
.toggle--btn,.toggle--btn:before,.toggle--btn:after,.toggle--checkbox,.toggle--checkbox:before,.toggle--checkbox:after,.toggle--feature,.toggle--feature:before,.toggle--feature:after{transition:all 250ms ease-in}
.toggle--btn:before,.toggle--btn:after,.toggle--checkbox:before,.toggle--checkbox:after,.toggle--feature:before,.toggle--feature:after{content:'';display:block}
.toggle--daynight .toggle--btn,.toggle--like .toggle--btn{position:relative;height:70px;width:125px;border-radius:70px}
.toggle--daynight .toggle--btn:before,.toggle--like .toggle--btn:before{position:absolute;top:2px;left:4px;width:56px;height:56px;border-radius:50%}
.toggle--daynight .toggle--btn{border:5px solid #1c1c1c;background-color:#3c4145}
.toggle--daynight .toggle--btn:before{background-color:#fff;border:5px solid #e3e3c7}
.toggle--daynight .toggle--btn:after{position:absolute;top:62%;left:39px;z-index:10;width:11.2px;height:11.2px;opacity:0;background-color:#fff;border-radius:50%;box-shadow:#fff 0 0,#fff 3px 0,#fff 6px 0,#fff 9px 0,#fff 11px 0,#fff 14px 0,#fff 16px 0,#fff 21px -1px 0 1px,#fff 16px -7px 0 -2px,#fff 7px -7px 0 1px,#d3d3d3 0 0 0 4px,#d3d3d3 6px 0 0 4px,#d3d3d3 11px 0 0 4px,#d3d3d3 16px 0 0 4px,#d3d3d3 21px -1px 0 5px,#d3d3d3 16px -7px 0 1px,#d3d3d3 7px -7px 0 5px;transition:opacity 100ms ease-in}
@keyframes starry_star {
50%{background-color:rgba(255,255,255,0.1);box-shadow:#fff 30px -3px 0 0,#fff 12px 10px 0 -1px,rgba(255,255,255,0.1) 38px 18px 0 1px,#fff 32px 34px 0 0,rgba(255,255,255,0.1) 20px 24px 0 -1.5px,#fff 5px 38px 0 1px}
}
@keyframes bounceIn {
0%{opacity:0;transform:scale(0.3)}
50%{opacity:100;transform:scale(1.1)}
55%{transform:scale(1.1)}
75%{transform:scale(0.9)}
100%{opacity:100;transform:scale(1)}
}
.toggle--daynight .toggle--feature{display:block;position:absolute;top:9px;left:52.5%;z-index:20;width:4px;height:4px;border-radius:50%;background-color:#fff;box-shadow:rgba(255,255,255,0.1) 30px -3px 0 0,rgba(255,255,255,0.1) 12px 10px 0 -1px,#fff 38px 18px 0 1px,rgba(255,255,255,0.1) 32px 34px 0 0,#fff 20px 24px 0 -1.5px,rgba(255,255,255,0.1) 5px 38px 0 1px;animation:starry_star 5s ease-in-out infinite}
.toggle--daynight .toggle--feature:before{position:absolute;top:-2px;left:-25px;width:18px;height:18px;background-color:#fff;border-radius:50%;border:5px solid #e3e3c7;box-shadow:#e3e3c7 -28px 0 0 -3px,#e3e3c7 -8px 24px 0 -2px;transform-origin:-6px 130%}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn{background-color:#9ee3fb;border:5px solid #86c3d7}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:before{left:55px;background-color:#ffdf6d;border:5px solid #e1c348}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn:after{opacity:100;animation-name:bounceIn;animation-duration:.6s;animation-delay:.1s;animation-fill-mode:backwards;animation-timing-function:ease-in-out}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature{opacity:0;box-shadow:rgba(255,255,255,0.1) 30px -3px 0 -4px,rgba(255,255,255,0.1) 12px 10px 0 -5px,#fff 38px 18px 0 -3px,rgba(255,255,255,0.1) 32px 34px 0 -4px,#fff 20px 24px 0 -5.5px,rgba(255,255,255,0.1) 5px 38px 0 -3px;animation:none}
.toggle--daynight .toggle--checkbox:checked + .toggle--btn > .toggle--feature:before{left:25px;transform:rotate(70deg)}

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

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

inputtype=checkbox:checked + .pseudocheckbox::before { … }

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

inputtype=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.
Перепечатка в интернет-изданиях разрешается только с указанием автора
и прямой ссылки на оригинальную статью. Перепечатка в печатных
изданиях допускается только с разрешения редакции.

Получение ключей и значений формы с помощью jQuery

Чтобы получить значения из формы без перезагрузки страницы, следует использовать скрипты (javascript или jQuery):

Создадим массив:

Затем каждый (each) выбранный пункт («input:checked») с помощью функции push запишем в массив val():

Содержание массива val() будем отображать на странице, для чего добавим объект html

jQuery:

Узнать, если checkbox html был выбран, можно с помощью .is(«:checked») и .prop(«checked»).

Получим значения(val) каждого отмеченного флажка и выведем его через alert():

То же самое проделаем для получения идентификатора (id) с помощью .prop («checked»):

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

Сделаем кнопку отправки формы недоступной («disabled»), если ни один флажок не был установлен:

Обратите внимание на двоеточие: .is («:checked») работает корректно с двоеточием, а .prop(«checked») срабатывает без двоеточия!!!

Добавим возможность отмечать сразу все пункты.

Весь код.

HTML:

jQuery:

PHP:

Checked or not checked?

Notice how all the checkboxes so far have not been checked from the beginning — the user would have to interact with the checkbox to change its state from unchecked to checked. This might be what you want, but sometimes, you want the checkbox to be checked by default, either to suggest a choice to the user or because you are showing a checkbox with a value that corresponds to an existing setting, e.g. from a database. Fortunately, this is very simple — just add the checked attribute to the checkbox:

In the old days of XHTML, where each attribute should always have a value, even the boolean attributes, it would look like this:

Either way should work in all modern browsers, but the first way is shorter and more «HTML5-like».

Почему не отправляются смс на МТС

Основной причиной невозможности обмена сообщениями является неправильные настройки СМС-центра. Для проверки введенных данных и корректировки значений необходимо зайти в настройки сообщений. В указанных полях должен находиться номер центра сообщений МТС: +79168999100. Вкладка канала передачи данных должна быть активной в графе «GSM», а тип сообщений на варианте «текст». Введенные настройки устанавливаются на телефон по умолчанию при использовании сим-карты. Сбои могут появиться после случайного удаления информации, а также при попадании вируса на устройство. Нередко причиной того, что не отправляются СМС Андроид, становится физический износ сим-карты, которую легко можно заменить при личном обращении в центр связи вашего оператора.

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsCascading DropdownDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

«Ренессанс Банк» — Страхование Заемщиков и Держателей Кредитных Карт

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

• Смерть заемщика независимо от обстоятельств и возраста.
• Наступление нетрудоспособности с присвоением 1 группы инвалидности.

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

Не всем лицам доступна услуга страхования. Не подлежат страхованию несовершеннолетние и лица, уже признанные инвалидами 1 или 2 группы, а также граждане в преклонном возрасте и заемщики, имеющие наркотическую зависимости или диагноз «вирус иммунодефицита человека», СПИД и т.д.

Подробнее с правилами страхования и порядок оформления знакомятся на страницах сайта «Ренессанс Кредит» в разделе «Дистанционное обслуживание» (вкладка «Страхование»).

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

CSS

С html структурой мы закончили. Теперь давайте посмотрим, каким образом мы можем стилизовать элементы <input>. Первым делом возьмёмся за радио элементы. Отображение позаимствуем с дизайна OS:

Стилизуем радиокнопки

В первую очередь, мы меняем иконку курсора на pointer (появляется рука с пальцем), для того чтобы пользователь понимал, что данный элемент кликабилен:

label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 25px;
	margin-right: 15px;
	font-size: 13px;
}

Затем спрячем радио кнопку по её атрибуту:

input {
	display: none;
}

Заменяем скрытый элемент псевдо классом :before.

label:before {
	content: "";
	display: inline-block;

	width: 16px;
	height: 16px;

	margin-right: 10px;
	position: absolute;
	left: 0;
	bottom: 1px;
	background-color: #aaa;
	box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}

Такой же стиль мы применим и к чекбоксу. Разница только в том, что для радио кнопки нам нужно сформировать окружность. Добиться подобного эффекта мы можем, воспользовавшись border-radius и задав радиус в половину ширины и высоты элемента.

.radio label:before {
	border-radius: 8px;
}

На данном этапе наши элементы должны выглядеть вот так:

Теперь нам нужно добавить мелкие кружочки в основной круг при клике по кнопке. Для этого воспользуемся псевдо-элементом CSS3 :checked, и в качестве контента запишем HTML символ круга &#8226;, но для того чтобы всё отображалось так, как нам нужно, данное значение нужно преобразовать для CSS. Для этого можем воспользоваться сервисом Entity Conversion Tool

input:checked + label:before {
    content: "\2022";
    color: #f3f3f3;
    font-size: 30px;
    text-align: center;
    line-height: 18px;
}

Теперь когда мы нажмём на радио кнопку, в основном сером круге должен появиться маленький белый кружок.

Стилизуем чекбоксы

Теперь давайте займёмся оформление чекбоксов. Для начала снова спрячем элемент:

input {
	display: none;
}

Поскольку мы убираем стандартное отображение чекбокса при помощи псевдо-элемента :before, просто добавим рамку:

.checkbox label:before {
	border-radius: 3px;
}

Затем добавим символ “галочка”, который появится при клике по чекбоксу. Сделаем это по аналогии с радиокругом. На этот раз нам понадобится преобразовать HTML символ &#10003;.

input:checked + label:before {
	content: "\2713";
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
	font-size: 15px;
	color: #f3f3f3;
	text-align: center;
    line-height: 15px;
}

В итоге, вот что у нас должно получиться:

Проверьте свои знания

Если вы хотите проверить свои знания по теме данного урока, можете пройти небольшой тест, состоящий из нескольких вопросов. В каждом вопросе правильным может быть только 1 вариант. После выбора вами одного из вариантов, система автоматически переходит к следующему вопросу. На получаемые вами баллы влияет правильность ваших ответов и затраченное на прохождение время

Обратите внимание, что вопросы каждый раз разные, а варианты перемешиваются

Cтатистика На весь экран

Сергей КрутькоЕвгений БуяновКирилл Ногалес

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

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

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

<input type="checkbox" class="custom-checkbox" id="happy" name="happy" value="yes">
<label for="happy">Happy</label>

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

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

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

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

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

Мы не будем использовать , а установим ему стили, с помощью которых уберём его из потока (), поместим его ниже существующих элементов (), а также сделаем его полностью прозрачным (). Зачем это нужно? Это нам необходимо для того, чтобы мы могли получить состояние фокуса, а затем стилизовать «подделный» или , когда он будет находиться в нём.

Шаг 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%;
}

Создание «поддельного» чекбокса выполним с помощью псевдоэлемента . Посредством CSS зададим ему размеры (в данном случае x), а затем нарисуем его с помощью . Свойства начинающие со слова будут определять положение самого флажка (когда будет в состоянии ).

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

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

.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");
}

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

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

/* стили при наведении курсора на 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;
}

Советы, как правильно использовать чекбокс

1. Не перемудрите и используйте стандартный вид чекбокса

Традиционно чекбоксы имеют квадратную форму

Пользователи распознают визуальные объекты по форме и стандартная квадратная форма чекбокса – это очень важно. Это связано с тем, что мы воспринимаем то, что ожидаем и ‘эта особенность описана у нас в Золотом правиле №4

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

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

✓ Пример понятного чекбокса из интерфейса почты Яндекса

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

2. Правильно располагайте списки чекбоксов

Правильно — это значит вертикально, чтобы каждый пункт был в отдельной строке.

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

3. Используйте в подписях чекбоксов понятные утвердительные формулировки

Подписи к чекбоксам должны быть утвердительными и отражать действия, чтобы было понятно, что произойдет при выборе каждой опции. Избегайте отрицательных формулировок, типа “Не присылать мне рассылку” —  в этом случае получается, что пользователь должен включить опцию, чтобы действие не происходило. Помните, что пользователи думают о своих целях, а не об инструментах для их исполнения.

✓ Удачный пример формулировки на сайте Ostrovok.ru

✘ Пример отрицательной формулировки в настройках Microsoft Word

4. Не делайте размер чекбокса слишком маленьким

Как известно, чем меньше элемент, тем сложнее пользователю с ним взаимодействовать. Эта проблема очень актуальна для чекбоксов. Как известно по закону Фиттса, в маленький квадрат неудобно ни целится, ни попадать. Есть несколько способов решить эту проблему. Так, можно превратить чекбокс в кнопку, метку или переключатель, сделав кликабельную область более крупной.

✓ Чекбокс маленького размера на сайте Ostrovok.ru, который превратили в кнопку

✓ Чекбокс удобного размера на сайте Аэрофлота

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

✓ Чекбокс небольшого размера на сайте Аэрофлота, который реагирует на нажатие подписи

6. Используйте опции «выбрать все» и «убрать все»

Чтобы облегчить работу пользователя с большим количеством чекбоксов (более 5), в интерфейсе должны быть предусмотрены опции «Выбрать все чекбоксы» и «Снять все чекбоксы». Представьте, что вам нужно выбрать, скажем, 14 пунктов из 20 в списке. Гораздо удобнее и быстрее будет сначала выбрать все, а потом снять ненужные галочки.

✓ Правильный пример использования опции “выбрать все” торрент-клиента μTorrent

7. Чекбокс не должен запускать действие мгновенно

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

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

✓ Удачный пример использования чекбокса на сайте Аэрофлота

Обычная галочка

Все люди встречались в жизни с такими символами, как галочка, начиная еще со школьной скамьи. При проведении тестирования нужно отмечать правильный вариант этим знаком. Затем при заполнении различных анкет. Ну а в нынешнее время, когда пользователи совершают через Интернет множество действий, без галочек вообще никуда. Даже простейшая регистрация на каком-либо сайте требует отметить некоторые пункты (увлечения, навыки).

Также сейчас развита интернет-торговля. При создании заказа пользователь отмечает интересующие его пункты. А еще часто при установке компьютерной игры предлагается выбрать дополнительное программное обеспечение. И тут тоже нужно сделать выбор. Так вот, чекбоксы – это те самые галочки, которые используются на веб-страницах.

Бизнес модель сервиса Dropbox

Пример 6: Анимированный переключатель LIKE

HTML разметка

.toggle{display:block;text-align:center;margin-top:40px;user-select:none}
.toggle--checkbox{display:none}
.toggle--btn{display:block;margin:0 auto;font-size:1.4em;transition:all 350ms ease-in}
.toggle--btn:hover{cursor:pointer}
.toggle--btn,.toggle--btn:before,.toggle--btn:after,.toggle--checkbox,.toggle--checkbox:before,.toggle--checkbox:after,.toggle--feature,.toggle--feature:before,.toggle--feature:after{transition:all 250ms ease-in}
.toggle--btn:before,.toggle--btn:after,.toggle--checkbox:before,.toggle--checkbox:after,.toggle--feature:before,.toggle--feature:after{content:'';display:block}
.toggle--like{position:relative}
.toggle--like .toggle--btn{border:5px solid #0865B0;background-color:#3498db}
.toggle--like .toggle--btn:before{background-color:#f2dd68;border:5px solid #e5ce5e}
.toggle--like .toggle--feature{position:absolute;left:14px;top:32%;width:7px;height:7px;border-radius:50%;background-color:#995710;box-shadow:28px 0 0 0 #995710}
.toggle--like .toggle--feature:before{position:absolute;left:0;top:11px;width:36px;height:17px;background-color:#995710;border-radius:36px 36px 0 0}
.toggle--like .toggle--feature:after{position:absolute;left:9px;top:21px;width:17px;height:7px;background-color:#d8aa2b;border-radius:17px 17px 0 0}
.toggle--like .toggle--checkbox:checked + .toggle--btn{background-color:#e25d5d;border:5px solid #AD1000}
.toggle--like .toggle--checkbox:checked + .toggle--btn:before{transform:translate(51px,0)}
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature{transform:translate(53px,0)}
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature:before{border-radius:0 0 36px 36px;top:11px}
.toggle--like .toggle--checkbox:checked + .toggle--btn .toggle--feature:after{top:21px;border-radius:50%/50%}

CSS

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

Стиль чекбокса не трогаем, он в любом случае не будет виден и переходим к нашему «декоративному»

Важно сделать чтобы элемент занимал всю доступную область внутри . Для этого задаём абсолютное позиционирование и устанавливаем ширину и высоту как 100% от родителя

Заодно смещаем элемент в левый верхний угол.

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

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

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

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

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

HTML5CSS3IECrOpSaFx

Заключение

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

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

А у вас на сайте пользователям удобно взаимодействовать с чекбоксами? → Узнайте у наших экспертов прямо сейчас.

Список литературы

1. Закона Фиттса
2. Немов Р. С. Психология. – 4-е изд. – М.: ВЛАДОС, 2003. – Кн. 1. Общие основы психологии.