CSS: How to set url image properly to checked checkbox - html

Question

I have this scenario, I have this list of checkbox with corresponding image for it, If the checkbox is checked, I want to append black circle at the back of checkbox image
Sample current output:
Sample expected output:
Code for populating checkbox:
<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 CSS for checkbox:
:checked + .form-check-label-badge:before {
content: url("../../../../assets/images/checkd-badge.png");
position: absolute;
cursor: pointer;
}
.chkbox-badge {
display: none;
}

Answer 1

Pure semantic HTML/CSS solution
This is easy to implement
This is what you need to do:
Your checkboxes need to have distinct id attributes. This allows you to connect a to it, using the label's for-attribute.
Example:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Here is a working snippet :
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 4px solid transparent; border-radius: 50%;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
}
label:before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked + label {
border-color: #000;
}
:checked + label:before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked + label img {
transform: scale(0.9);
border-radius: 50%;
z-index: -1;
}
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://m.media-amazon.com/images/I/61Dnvcie7PL._SL1024_.jpg" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://m.media-amazon.com/images/I/91vx4DQg4jS._AC_SX466_.jpg" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ31Gis0FZirNYl6OGbnHlXWJTtgZXUVB6eNt7DomL5ZnK_v94cJpNLw24jKMcuQW3q7U&usqp=CAU" /></label>
</li>
</ul>