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: 2em;
8}
9
10/* Hide default HTML checkbox */
11.switch input {
12 opacity: 0;
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: 0;
25 background-color: #fff;
26 border: 1px solid #99999;
27 transition: .4s;
28}
29
30.slider:before {
31 position: absolute;
32 content: "";
33 height: 1.5em;
34 width: 1.5em;
35 left: 0.20em;
36 bottom: 0.25em;
37 background-color: white;
38 transition: .4s;
39 box-shadow: 0 0 2px 0px #999999;
40}
41
42input:checked + .slider {
43 background-color: #2da54f;
44}
45
46input:focus + .slider {
47 box-shadow: 0 0 1px #2196F3;
48}
49
50input:checked + .slider:before {
51 transform: translateX(1.5em);
52}