1/* The switch - the box around the slider */
2.switch {
3 font-size: 11px;
4 position: relative;
5 display: inline-block;
6 width: 3.5em;
7 height: 1em;
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: #ccc;
26 border: 2px solid #000;
27 transition: .4s;
28 border-radius: 1px;
29}
30
31.slider:before {
32 position: absolute;
33 content: "";
34 height: 1.3em;
35 width: 1.2em;
36 border-radius: 2px;
37 left: 0.2em;
38 bottom: 0.3em;
39 background-color: #fff;
40 border: 2px solid #000;
41 transition: 0.1s;
42}
43
44input:checked + .slider {
45 background-color: #000;
46}
47
48input:focus + .slider {
49 box-shadow: 0 0 1px #2196F3;
50}
51
52input:checked + .slider:before {
53 transform: translateX(1.3em);
54}