Кастомные чекбоксы. Стилизация через CSS (Custom checkboxes)

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

Демо

Обычно стилизация чекбоксов на CSS происходит с использованием псевдоклассов. Я привязываюсь к тегу label, которого может и не быть рядом с чекбоксом, но я его оставлю. Вот так:

1
2

<input type="checkbox" class="checkbox" id="box"/>
<label for="box"></label>

Класс checkbox был написан для удобства напиcания CSS, а ID для привязки лейбла и изменения цвета в последующем. Теперь напишем сам 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

.checkbox {
  position: relative;
  z-index: -1;
  opacity: 0;
 
}
.checkbox + label {
  position: relative;
  cursor: pointer;
}
.checkbox + label:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 50px;
  height: 26px;
  border-radius: 13px;
  background: #CDD1DA;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.4);
  transition: .2s;
}
.checkbox + label:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
  transition: .2s;
}
.checkbox:checked + label:before {
  background: #006cfa;
}
.checkbox:checked + label:after {
  left: 26px;
}

У нас практически все готово. Теперь для того, чтобы изменить фоновый цвет конкретного чекбокса, вы можете дописать такой код:

1
2
3

#box:checked + label:before{
  background: #8BC34A;
}

А если в сам label необходимо поместить какой-то текст, то начиная с 7 строки, где .checkbox + label нужно дописать padding, чтобы в итоге получилось вот так:

1
2
3
4
5

.checkbox + label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
}

На этом стилизация кастомных чекбоксов окончена. Кода получилось совсем не много. Спасибо за внимание.