1/* Hide the default checkbox */
2.container input {
3  position: absolute;
4  opacity: 0;
5  cursor: pointer;
6  height: 0;
7  width: 0;
8}
9
10.container {
11  display: block;
12  position: relative;
13  cursor: pointer;
14  font-size: 20px;
15  user-select: none;
16}
17
18/* Create a custom checkbox */
19.checkmark {
20  position: relative;
21  top: 0;
22  left: 0;
23  height: 6em;
24  width: 3em;
25  background-color: #ccc;
26}
27
28.switch {
29  position: relative;
30  height: 5.4em;
31  width: 2.4em;
32  top: .3em;
33  left: .3em;
34  background-color: white;
35  box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 2px, rgba(0, 0, 0, 0.3) 0px 0px 0px -3px, rgba(0, 0, 0, 0.2) 0px -8px 0px inset;
36}
37
38.container input:checked ~ .checkmark .switch {
39  box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 0px 0px -3px, rgba(0, 0, 0, 0.2) 0px -6px 0px inset;
40  transform: rotateX(180deg);
41}