1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 4em;
7  height: 2em;
8}
9
10/* Hide default HTML checkbox */
11.switch .chk {
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: rgb(255, 255, 255);
26  transition: .4s;
27  border-radius: 30px;
28}
29
30.slider:before {
31  position: absolute;
32  content: "OFF";
33  display: grid;
34  place-content: center;
35  height: 1.6em;
36  width: 3.6em;
37  border-radius: 20px;
38  left: 0.17em;
39  bottom: 0.22em;
40  background-color: rgb(255, 0, 0);
41  box-shadow: 0px 0px 3.7px black;
42  transition: .4s ease-in-out;
43}
44
45.chk:checked + .slider:before {
46  content: "ON";
47  background-color: limegreen;
48  box-shadow: inset 0px 0px 5px black;
49}