Here is my customized HTML code using Bootstrap:
<div class="col-lg-4 col-12 text-center">
<div style="width: 80%; margin: auto">
<ul class="list-group">
{% for sl in my_list %}
<li
class="list-group-item my-lg-2 my-1 list-group-item-secondary bg-dark text-light"
>
<input
class="form-check-input me-1"
type="checkbox"
value=""
id="checkbox_{{ loop.index0 }}"
style="
border-top-left-radius: inherit;
border-top-right-radius: inherit;
"
/>
<label
class="form-check-label"
for="checkbox_{{ loop.index0 }}"
>{{ sl.description }}</label
>
</li>
{% endfor %}
</ul>
</div>
</div>
I have also added some custom styles for my checkboxes:
@keyframes shadowAnimation {
0% {
box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.9);
}
100% {
box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.1);
}
}
.animate-checkbox {
animation: shadowAnimation 1s ease-in-out;
}
input[type="checkbox"].form-check-input:focus-visible,
input[type="checkbox"].form-check-input:focus {
border-color: #212529;
border: var(--bs-border-width) solid #ff9800 !important;
}
The animation is controlled by JavaScript. I want to change the color of the checkbox tick without overwriting the existing options. Any suggestions on how to achieve this? Thank you in advance.
UPDATE: I have successfully implemented this in a project without using Bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="col-lg-4 col-12 text-center">
<div style="width: 80%; margin: auto">
<ul class="list-group">
<li
class="list-group-item my-lg-2 my-1 list-group-item-secondary bg-dark text-light"
>
<input
class="form-check-input me-1 animate-checkbox"
type="checkbox"
value=""
id="checkbox_{{ loop.index0 }}"
/>
<label class="form-check-label" for="checkbox_{{ loop.index0 }}"
>test</label
>
</li>
</ul>
</div>
</div>
</body>
</html>
@keyframes shadowAnimation {
0% {
box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.9);
}
100% {
box-shadow: 0 0 0 0.25rem rgba(255, 152, 0, 0.1);
}
}
/* Apply your animation to the checkbox */
input[type="checkbox"].form-check-input.animate-checkbox {
/* Add your animation styles here */
animation: shadowAnimation 1s ease-in-out;
}
input[type="checkbox"]:checked {
background-color: #ff9800;
}
input[type="checkbox"]:checked:after {
content: "\2713";
color: #212529;
}
input[type="checkbox"] {
text-align: center;
vertical-align: middle;
width: 20px !important;
height: 20px !important;
appearance: none;
border-radius: 25%;
border: 1px solid #212529;
box-shadow: none;
font-size: 1em;
}
When using Bootstrap, a white "✓" is visible behind the black one, which is centered within the square. How can I resolve this issue?