1/* Hide the default checkbox */
2.container input {
3 position: absolute;
4 opacity: 0;
5 cursor: pointer;
6 height: 0;
7 width: 0;
8 border-radius: 5px;
9}
10
11.container {
12 display: block;
13 position: relative;
14 cursor: pointer;
15 font-size: 20px;
16 user-select: none;
17 border-radius: 5px;
18 box-shadow: 2px 2px 0px rgb(183, 183, 183);
19}
20
21/* Create a custom checkbox */
22.checkmark {
23 position: relative;
24 top: 0;
25 left: 0;
26 height: 1.3em;
27 width: 1.3em;
28 background-color: #ccc;
29 border-radius: 5px;
30}
31
32/* When the checkbox is checked, add a blue background */
33.container input:checked ~ .checkmark {
34 box-shadow: 3px 3px 0px rgb(183, 183, 183);
35 transition: all 0.2s;
36 opacity: 1;
37 background-image: linear-gradient(45deg, rgb(100, 61, 219) 0%, rgb(217, 21, 239) 100%);
38}
39
40.container input ~ .checkmark {
41 transition: all 0.2s;
42 opacity: 1;
43 box-shadow: 1px 1px 0px rgb(183, 183, 183);
44}
45
46/* Create the checkmark/indicator (hidden when not checked) */
47.checkmark:after {
48 content: "";
49 position: absolute;
50 opacity: 0;
51 transition: all 0.2s;
52}
53
54/* Show the checkmark when checked */
55.container input:checked ~ .checkmark:after {
56 opacity: 1;
57 transition: all 0.2s;
58}
59
60/* Style the checkmark/indicator */
61.container .checkmark:after {
62 left: 0.45em;
63 top: 0.25em;
64 width: 0.25em;
65 height: 0.5em;
66 border: solid white;
67 border-width: 0 0.15em 0.15em 0;
68 transform: rotate(45deg);
69}