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 #ccc; /* Default border color */
25  border-radius: 6px; /* Round the corners */
26  background-color: #fff; /* 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, glowEffect 1s infinite alternate; /* Add glow effect */
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 #000; /* Default color for the tick */
47  border-width: 0 3px 3px 0; /* Adjust thickness and direction */
48}
49
50/* When the checkbox is checked, change the box color to red */
51.checkbox-container input:checked ~ .checkmark {
52  background-color: #ff0000; /* Change box color to red */
53  border-color: #ff0000; /* Change border color to red */
54}
55
56/* When the checkbox is checked, change the tick color to black */
57.checkbox-container input:checked ~ .checkmark:after {
58  border-color: #000; /* Change tick color to black */
59}
60
61/* On hover, add a slight shadow */
62.checkbox-container:hover .checkmark {
63  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add shadow effect */
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
76/* Keyframes for glow effect */
77@keyframes glowEffect {
78  0% {
79    box-shadow: 0 0 5px #ff0000;
80  }
81  100% {
82    box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000;
83  }
84}
85