1/* Customize the label (the checkbox-btn) */
2.checkbox-btn {
3  display: block;
4  position: relative;
5  padding-left: 30px;
6  margin-bottom: 10px;
7  cursor: pointer;
8  -webkit-user-select: none;
9  -moz-user-select: none;
10  -ms-user-select: none;
11  user-select: none;
12}
13
14/* Hide the browser's default checkbox */
15.checkbox-btn input {
16  position: absolute;
17  opacity: 0;
18  cursor: pointer;
19  height: 0;
20  width: 0;
21}
22
23.checkbox-btn label {
24  cursor: pointer;
25  font-size: 14px;
26}
27/* Create a custom checkbox */
28.checkmark {
29  position: absolute;
30  top: 0;
31  left: 0;
32  height: 18px;
33  width: 18px;
34  border-radius: 5px;
35  border: 3px solid #1663a7;
36}
37.checkbox-btn input:checked ~ .checkmark {
38  background-color: transparent;
39}
40
41/* Create the checkmark/indicator (hidden when not checked) */
42.checkmark:after {
43  content: "";
44  position: absolute;
45  visibility: hidden;
46  opacity: 0;
47  left: 3.5px;
48  top: 0.5px;
49  width: 3.5px;
50  height: 6px;
51  border: 2.5px solid #1663a7;
52  border-width: 0 2.5px 2.5px 0;
53  transition: .3s ease-in-out;
54  -webkit-transform: rotate(45deg);
55  -ms-transform: rotate(45deg);
56  transform: rotate(45deg);
57}
58
59/* Show the checkmark when checked */
60.checkbox-btn input:checked ~ .checkmark:after {
61  visibility: visible;
62  opacity: 1;
63}
64
65