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

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;
}

CodePudding user response：

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>