1/* Hide the default checkbox */
2.container input {
3  display: none;
4}
5
6.container {
7  display: block;
8  position: relative;
9  cursor: pointer;
10  font-size: 20px;
11  user-select: none;
12  -webkit-tap-highlight-color: transparent;
13}
14
15/* Create a custom checkbox */
16.checkmark {
17  position: relative;
18  top: 0;
19  left: 0;
20  height: 1.3em;
21  width: 1.3em;
22  background-color: #2196F300;
23  border-radius: 0.25em;
24  transition: all 0.25s;
25}
26
27/* When the checkbox is checked, add a blue background */
28.container input:checked ~ .checkmark {
29  background-color: #2196F3;
30}
31
32/* Create the checkmark/indicator (hidden when not checked) */
33.checkmark:after {
34  content: "";
35  position: absolute;
36  transform: rotate(0deg);
37  border: 0.1em solid black;
38  left: 0;
39  top: 0;
40  width: 1.05em;
41  height: 1.05em;
42  border-radius: 0.25em;
43  transition: all 0.25s, border-width 0.1s;
44}
45
46/* Show the checkmark when checked */
47.container input:checked ~ .checkmark:after {
48  left: 0.45em;
49  top: 0.25em;
50  width: 0.25em;
51  height: 0.5em;
52  border-color: #fff0 white white #fff0;
53  border-width: 0 0.15em 0.15em 0;
54  border-radius: 0em;
55  transform: rotate(45deg);
56}
57