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 border-radius: 9px;
12 display: block;
13 position: relative;
14 cursor: pointer;
15 font-size: 20px;
16 user-select: none;
17 box-shadow: rgba(139, 18, 113, 0.2) 0px 8px 24px;
18 background-image: linear-gradient(45deg, #f3d5f7, #fbf6e7, #e6fcf5);
19}
20
21/* Create a custom checkbox */
22.checkmark {
23 border-radius: 9px;
24 position: relative;
25 top: 0;
26 left: 0;
27 height: 1.3em;
28 width: 1.3em;
29 background-color: linear-gradient(45deg, #f8e7fa, #fbf6e7, #e6fcf5);
30}
31
32/* Create the checkmark/indicator (hidden when not checked) */
33.checkmark:after {
34 content: "";
35 position: absolute;
36 display: none;
37}
38
39/* Show the checkmark when checked */
40.container input:checked ~ .checkmark:after {
41 display: block;
42}
43
44/* Style the checkmark/indicator */
45.container .checkmark:after {
46 left: 0.45em;
47 top: 0.25em;
48 width: 0.25em;
49 height: 0.5em;
50 border: solid rgb(233, 182, 182);
51 border-width: 0 0.15em 0.15em 0;
52 transform: rotate(45deg);
53}