Вот что мы будем создавать в этом уроке - простой контрольный список задач:

Для вдохновения мы будем использовать  Hngry UI Kit - комплект поставки едыОн совместим со Sketch, Figma и Adobe XD, поставляется в светлых и темных вариантах и ​​содержит гораздо больше компонентов пользовательского интерфейса, чем только эти флажки.

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

Собрав все вместе, вот как выглядит требуемая разметка:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<ol class="switches">
  <li>
    <input type="checkbox" id="1">
    <label for="1">
      <span>...</span>
      <span></span>
    </label>
  </li>
  <li>
    <input type="checkbox" id="2">
    <label for="2">
      <span>...</span>
      <span></span>
    </label>
  </li>
   
  <!-- more list items here -->
</ol>


Первое, с чем нам нужно иметь дело в наших стилях, это визуально скрыть флажок:

1
2
3
4
[type="checkbox"] {
  position: absolute;
  left: -9999px;
}

Далее список будет иметь максимальную ширину с горизонтально центрированным содержимым:

1
2
3
4
5
.switches {
  max-width: 500px;
  width: 95%;
  margin: 50px auto 0;
}

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


Вот связанные стили:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*CUSTOM VARIABLES HERE*/
 
ol {
  list-style: none;
}
 
.switches li {
  position: relative;
  counter-increment: switchCounter;
}
 
.switches li::before {
  content: counter(switchCounter);
  position: absolute;
  top: 50%;
  left: -30px;
  transform: translateY(-50%);
  font-size: 2rem;
  font-weight: bold;
  color: var(--pink);
}
 
@media screen and (max-width: 600px) {
  .switches li::before {
    display: none;
  }
}

Метки будут вести себя как гибкие контейнеры, а их прямые дочерние элементы будут распределены по границам главной оси:

1
2
3
4
5
.switches label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

Чтобы построить компонент switch, мы сначала определим некоторые фиксированные размеры для соответствующего spanэлемента (последний).


Далее мы определим его  ::beforeи ::afterпсевдоэлементы. ::beforeПсевдо-элемент будет иметь форму круга, в то время как ::afterпсевдо-элемент будет иметь значок закрытия в качестве фонового изображения.


Чтобы добиться всего этого, вот соответствующие стили:

01
02
03
04
05
06
07
08
09
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
/*CUSTOM VARIABLES HERE*/
 
.switches span:last-child {
  position: relative;
  width: 50px;
  height: 26px;
  border-radius: 15px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
  background: var(--gray);
  transition: all 0.3s;
}
 
.switches span:last-child::before,
.switches span:last-child::after {
  content: "";
  position: absolute;
}
 
.switches span:last-child::before {
  left: 1px;
  top: 1px;
  width: 24px;
  height: 24px;
  background: var(--white);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.3s;
}
 
.switches span:last-child::after {
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  background: url(uncheck-switcher.svg);
  background-size: 12px 12px;
}


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


Более конкретно:

  • Его цвет изменится.
  • Положение его ::before псевдоэлемента изменится. Он будет перемещен с помощью слайд-перехода слева направо.
  • Положение и фоновое изображение его ::afterпсевдоэлемента изменятся. Теперь он будет располагаться с левой стороны контейнера и будет содержать галочку в качестве фонового изображения.

Чтобы удовлетворить все вышеперечисленные требования,  мы воспользуемся преимуществом  :checked псевдокласса  и  соседнего братского комбинатора  ( +).

Вот стили, которые обрабатывают эту функциональность:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
/*CUSTOM VARIABLES HERE*/
 
.switches [type="checkbox"]:checked + label span:last-child {
  background: var(--green);
}
 
.switches [type="checkbox"]:checked + label span:last-child::before {
  transform: translateX(24px);
}
 
.switches [type="checkbox"]:checked + label span:last-child::after {
  width: 14px;
  height: 14px;
  left: 8px;
  background-image: url(checkmark-switcher.svg);
  background-size: 14px 14px;
}


Вот и все, ребята! В этом уроке мы воспользовались «техникой взлома CSS-флажков» и сумели создать полезный компонент тумблера. Надеюсь, вам понравилось это, и вы включите его в предстоящий проект.