In my current situation, I have a list of checkboxes with corresponding images. When a checkbox is checked, I would like to add a black circle behind the image.
Here is an example of the current output:
https://i.sstatic.net/Pq4vP.png
This is what I expect the output to look like:
https://i.sstatic.net/lVBeV.png
Here is the code used to create the checkboxes:
<div
key={item.id}
className="chk-multiple-badge form-check form-check-inline"
>
<input
className="chkbox-badge form-check-input"
type="checkbox"
id={item.id}
/>
<label
htmlFor={item.id}
className="form-check-label form-check-label-badge"
>
<Row>
<Col>
<img
className="chk-badge-img"
src={item.imgBase64}
alt={item.badge_name}
/>
</Col>
</Row>
<Row>
<Col>{item.badge_name}</Col>
</Row>
</label>
</div>
And here is the CSS for styling the checkboxes:
:checked + .form-check-label-badge:before {
content: url("../../../../assets/images/checkd-badge.png");
position: absolute;
cursor: pointer;
}
.chkbox-badge {
display: none;
}