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; /* Add border for 3D effect */
25  border-radius: 6px; /* Round the corners */
26  background-color: #fff; /* Default color */
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 4px 4px 0; /* Adjust thickness and direction */
48}
49
50/* On hover, add a grey background color */
51.checkbox-container:hover .checkmark {
52  background-color: #ccc;
53  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add subtle shadow */
54  transform: scale(1.05); /* Scale up slightly */
55}
56
57/* When the checkbox is checked, add a green background */
58.checkbox-container input:checked ~ .checkmark {
59  background-color: #4caf50;
60  border-color: #4caf50; /* Change border color */
61  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); /* Add shadow for 3D effect */
62}
63
64/* Keyframes for expanding animation */
65@keyframes checkboxExpand {
66  0% {
67    transform: translate(-50%, -50%) rotate(45deg) scale(0);
68  }
69  100% {
70    transform: translate(-50%, -50%) rotate(45deg) scale(1);
71  }
72}
73