1/* The switch - the box around the slider */
2.switch {
3 font-size: 17px;
4 position: relative;
5 display: inline-block;
6 width: 3.5em;
7 height: 1.5em;
8}
9/* Hide default HTML checkbox */
10.switch input {
11 opacity: 0;
12 width: 0;
13 height: 0;
14}
15/* The slider */
16.slider {
17 position: absolute;
18 cursor: pointer;
19 top: 0;
20 left: 0;
21 right: 0;
22 bottom: 0;
23 background-color: #ccc;
24 transition: .4s;
25 border-radius: 1rem 0rem 1rem;
26}
27
28.slider:before {
29 position: absolute;
30 content: "";
31 height: 1.5em;
32 width: 1.4em;
33 left: 0em;
34 bottom: 0em;
35 background-color: white;
36 transition: .4s;
37 border-radius: 1rem 0rem 1rem;
38 border: 3px solid white;
39}
40
41input:checked + .slider {
42 background-color: #72eb67;
43}
44
45input:focus + .slider {
46 box-shadow: 0 0 1px #2196F3;
47}
48
49input:checked + .slider:before {
50 transform: translateX(2.2em);
51 background-color: green;
52 box-shadow: 0px 0px 40px 5px #72eb67;
53 border: 3px solid white;
54}
55
56input:checked + .slider::after {
57 content: "|";
58 color: white;
59 position: absolute;
60 right: 0.3rem;
61 transform: rotate(45deg);
62}
63