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.checkmark {
19  position: relative;
20  top: 0;
21  left: 0;
22  height: 1.3em;
23  width: 1.3em;
24}
25
26.checkmark span {
27  width: 32px;
28  height: 2px;
29  background-color: white;
30  position: absolute;
31  transition: all 0.3s ease-in-out;
32  -webkit-transition: all 0.3s ease-in-out;
33  -moz-transition: all 0.3s ease-in-out;
34  -ms-transition: all 0.3s ease-in-out;
35  -o-transition: all 0.3s ease-in-out;
36}
37
38.checkmark span:nth-child(1) {
39  top: 10%;
40}
41
42.checkmark span:nth-child(2) {
43  top: 50%;
44}
45
46.checkmark span:nth-child(3) {
47  top: 90%;
48}
49
50.container input:checked + .checkmark span:nth-child(1) {
51  top: 50%;
52  transform: translateY(-50%) rotate(45deg);
53  -webkit-transform: translateY(-50%) rotate(45deg);
54  -moz-transform: translateY(-50%) rotate(45deg);
55  -ms-transform: translateY(-50%) rotate(45deg);
56  -o-transform: translateY(-50%) rotate(45deg);
57}
58
59.container input:checked + .checkmark span:nth-child(2) {
60  top: 50%;
61  transform: translateY(-50%) rotate(-45deg);
62  -webkit-transform: translateY(-50%) rotate(-45deg);
63  -moz-transform: translateY(-50%) rotate(-45deg);
64  -ms-transform: translateY(-50%) rotate(-45deg);
65  -o-transform: translateY(-50%) rotate(-45deg);
66}
67
68.container input:checked + .checkmark span:nth-child(3) {
69  transform: translateX(-50px);
70  -webkit-transform: translateX(-50px);
71  -moz-transform: translateX(-50px);
72  -ms-transform: translateX(-50px);
73  -o-transform: translateX(-50px);
74  opacity: 0;
75}