1/* The switch - the box around the slider */
2.switch {
3 font-size: 17px;
4 position: relative;
5 display: inline-block;
6 width: 62px;
7 height: 35px;
8}
9
10/* Hide default HTML checkbox */
11.switch input {
12 opacity: 1;
13 width: 0;
14 height: 0;
15}
16
17/* The slider */
18.slider {
19 position: absolute;
20 cursor: pointer;
21 top: 0;
22 left: 0;
23 right: 0;
24 bottom: 0px;
25 background: #fff;
26 transition: .4s;
27 border-radius: 30px;
28 border: 1px solid #ccc;
29}
30
31.slider:before {
32 position: absolute;
33 content: "";
34 height: 1.9em;
35 width: 1.9em;
36 border-radius: 16px;
37 left: 1.2px;
38 top: 0;
39 bottom: 0;
40 background-color: white;
41 box-shadow: 0 2px 5px #999999;
42 transition: .4s;
43}
44
45input:checked + .slider {
46 background-color: #5fdd54;
47 border: 1px solid transparent;
48}
49
50input:checked + .slider:before {
51 transform: translateX(1.5em);
52}