1.switch {
2  font-size: 17px;
3  position: relative;
4  display: inline-block;
5  width: 3.5em;
6  height: 2em;
7  margin-right: 12px;
8}
9
10.switch input {
11  opacity: 0;
12  width: 0;
13  height: 0;
14}
15
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  -webkit-transition: .4s;
25  transition: .4s;
26  box-shadow: inset 2px 2px 12px -5px gray;
27}
28
29.slider:before {
30  position: absolute;
31  content: "";
32  height: 2em;
33  width: 1.75em;
34  left: 0;
35  bottom: 0;
36  background-color: white;
37  -webkit-transition: .4s;
38  transition: .4s;
39}
40
41.slider-input:checked + .slider {
42  background-color: #90EE90;
43  box-shadow: inset 2px 2px 9px -5px gray;
44}
45
46.slider-input:focus + .slider {
47  box-shadow: 0 0 1px #90EE90;
48}
49
50.slider-input:checked + .slider:before {
51  -webkit-transform: translateX(1.75em);
52  -ms-transform: translateX(1.75em);
53  transform: translateX(1.75em);
54}