Checkbox by OptX71285225

1/* Hide the default checkbox */
2.checkbox-container input {
3  position: absolute;
4  opacity: 0;
5  cursor: pointer;
6}
7
8/* Create a custom checkbox container */
9.checkbox-container {
10  position: relative;
11  display: inline-block;
12  font-size: 18px; /* Make the checkbox slightly bigger */
13  margin-bottom: 12px;
14  cursor: pointer;
15}
16
17/* Style the checkmark */
18.checkmark {
19  position: absolute;
20  top: 0;
21  left: 0;
22  height: 30px; /* Make the checkbox slightly bigger */
23  width: 30px; /* Make the checkbox slightly bigger */
24  border: 2px solid #2196f3; /* Default color for the box */
25  border-radius: 6px; /* Round the corners */
26  background-color: #2196f3; /* Default color for the box */
27  transition: all 0.3s ease; /* Add smooth transition */
28}
29
30/* Show the checkmark when checkbox is checked */
31.checkbox-container input:checked ~ .checkmark:after {
32  display: block;
33  animation: checkboxExpand 0.3s ease forwards;
34}
35
36/* Style the checkmark/indicator */
37.checkmark:after {
38  content: "";
39  position: absolute;
40  display: none;
41  top: 50%; /* Center vertically */
42  left: 50%; /* Center horizontally */
43  transform: translate(-50%, -50%) rotate(45deg) scale(0); /* Center and hide initially, then scale to appear */
44  width: 8px; /* Adjust size */
45  height: 15px; /* Adjust size */
46  border: solid #fff; /* Change color of the tick to white */
47  border-width: 0 3px 3px 0; /* Adjust thickness and direction */
48}
49
50/* On hover, add a lighter blue background color */
51.checkbox-container:hover .checkmark {
52  background-color: #64b5f6;
53}
54
55/* When the checkbox is checked, add a black background */
56.checkbox-container input:checked ~ .checkmark {
57  background-color: #000;
58  border-color: #000; /* Change border color */
59}
60
61/* When the checkbox is checked, change the tick color to blue */
62.checkbox-container input:checked ~ .checkmark:after {
63  border-color: #2196f3; /* Change tick color to blue */
64}
65
66/* Keyframes for expanding animation */
67@keyframes checkboxExpand {
68  0% {
69    transform: translate(-50%, -50%) rotate(45deg) scale(0);
70  }
71  100% {
72    transform: translate(-50%, -50%) rotate(45deg) scale(1);
73  }
74}
75