Стилизация checkbox, привязка к Label

@Pepperok · Регистрация: 24.07.2011

Студворк — интернет-сервис помощи студентам

Добрый день, делаю стилизацию checkbox

как сделать чтобы checkbox срабатывал при нажатии на label

вот пример https://jsfiddle.net/3y4yfc2y/

HTML5
1
2
3
<input type="checkbox"><label></label><label>1111111</label><br />
<input type="checkbox"><label></label><label>2222222</label><br />
<input type="checkbox"><label></label><label>3333333</label><br />

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
input[type='checkbox'] + label {
display: inline;
    background: #000;
    padding-left: 22px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 0px;
    background-position: -44px 0;   
    
}
 
 
 input[type='checkbox'] + label {
    display: inline;
     background: #000;
    padding-left: 22px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-left: 0px;
    background-position: -44px 0;
}
 
 input[type='checkbox']:checked + label {
background-position: 0px 0px !important;
}
 
 
 input[type='checkbox']:hover + label {
    background-position: -22px 0;
}
 
 input[type='checkbox']:select + label {
    background-position: 0px 0px;
}
 
input {
    width: 0px;
}

Спасибо

@Fedor92 · 02.03.2016, 13:11

Как-то так...

HTML5
1
<input type="checkbox" id="first"><label for="first">Чекбокс</label>

Либо чекбокс можно засунуть в лэйбл...

HTML5
1
<label><input type="checkbox">Чекбокс</label>

@Pepperok · 02.03.2016, 13:16 **[ТС]**

Спасибо!

Новые блоги и статьи Все статьи Все блоги /
Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .

@Pepperok 0 / 0 / 0 Регистрация: 24.07.2011 Сообщений: 62
	02.03.2016, 13:16 [ТС]
	Спасибо! 0