Trying to create custom checkboxes for different colors like red, blue, etc...
https://i.sstatic.net/IKqJH.jpg
Struggling to achieve the desired outcome
Utilizing Bootstrap 5.3: Attempting to learn by dissecting a bootstrap template with the desired result. Referencing the example (shop leftsidebar => filter-options): Initially, hid the standard checkbox by adding the code below into my scss (linked to Bootstrap class).
.form-check-input{
border: 0;
background: none;
}
For the color balls, here is the code somewhat inspired by the mentioned site
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="checkbox-ring-size rounded-circle border border-1 border-danger">
<span class="checkbox-color-size rounded-circle bg-danger">
</span>
</label>
<label class="form-check-label font-philos-ita" for="flexCheckDefault">
RED
</label>
</div>
These are the custom classes: checkbox-ring-size and checkbox-color-size, where one represents the outer line when selected
.checkbox-ring-size{
width:14px;
height:14px;
}
while the other is just the colored ball
.checkbox-color-size{
width:10px;
height:10px;
}
Feeling stuck and unsure how to make this custom checkbox clickable to indicate selection. Also, need to address the issue where clicking the area of the invisible Bootstrap checkbox still enables checking. Bootstrap template faces this issue as well, but its custom buttons function correctly.
Any assistance would be greatly appreciated, aiming to stick with Bootstrap as much as possible.