1.switch {
2 --false: #E81B1B;
3 --true: #009068;
4}
5
6input[type=checkbox] {
7 appearance: none;
8 height: 2rem;
9 width: 3.5rem;
10 background-color: #fff;
11 position: relative;
12 border-radius: .2em;
13 cursor: pointer;
14}
15
16input[type=checkbox]::before {
17 content: '';
18 display: block;
19 height: 1.9em;
20 width: 1.9em;
21 transform: translate(-50%, -50%);
22 position: absolute;
23 top: 50%;
24 left: calc(1.9em/2 + .3em);
25 background-color: var(--false);
26 border-radius: .2em;
27 transition: .3s ease;
28}
29
30input[type=checkbox]:checked::before {
31 background-color: var(--true);
32 left: calc(100% - (1.9em/2 + .3em));
33}