CSS：如何正确设置 url 图像以选中复选框

Question

我有这种情况，我有这个带有相应图像的复选框列表，如果复选框被选中，我想在复选框图像的后面附加黑色圆圈

当前输出示例：

示例预期输出：

填充复选框的代码：

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

和 CSS 复选框：

:checked + .form-check-label-badge:before {
  content: url("../../../../assets/images/checkd-badge.png");
  position: absolute;
  cursor: pointer;
}
.chkbox-badge {
  display: none;
}

Answer 1

纯语义HTML/CSS解法

这很容易实现

这是你需要做的：

您的复选框需要具有不同的 id 属性。这允许您使用标签的 for-attribute.

将 a 连接到它

示例：

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>

这是一个工作片段：

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>

CSS：如何正确设置 url 图像以选中复选框

CSS: How to set url image properly to checked checkbox

html

css

checkbox

reactjs