html - 如何使用图像而不是单选按钮？

Question

我有一个单选按钮的 div:

            <div class="radio-line">
          <label>
            <img src="img/black.jpeg" />
            <input type="radio" name="choice1" value="1"/>
          </label>
          <label>
            <img src="img/blue.jpg" />
            <input type="radio" name="choice1" value="2"/>
          </label>
        </div>

这是我的 CSS:

img {
  width: 20vw;
  height: 20vw;
  padding: 2vw;
}

input[type=radio] {
  display: none;
}

img:hover {
  opacity: 0.4;
  cursor: pointer;
}

img:active {
  opacity:0.4;
  cursor: pointer;
}

input[type=radio]:checked + img {
  border: 20px solid rgb(228, 207, 94);
}

当我将鼠标悬停在一个正方形上时，正方形的不透明度会发生变化，但是当我点击该正方形时没有任何反应(当它应该被“选中”时，它周围应该有一个边框)。我一直在尝试使用不同的 div 和标签，但没有任何效果。

img {
  width: 20vw;
  height: 20vw;
  padding: 2vw;
}

input[type=radio] {
  display: none;
}

img:hover {
  opacity:0.6;
  cursor: pointer;
}

img:active {
  opacity:0.4;
  cursor: pointer;
}

input[type=radio]:checked + img {
  border: 20px solid rgb(228, 207, 94);
}

              <label>
                <img src="img/black.jpeg" />
                <input type="radio" name="choice-1" value="1"/>
              </label>
              <label>
                <img src="img/blue.jpg" />
                <input type="radio" name="choice-1" value="1"/>
              </label>

Answer 1

您可以使用 :checked 伪类和兄弟选择器来实现该效果。

所以首先要做的是进入一个结构，其中输入是标签的兄弟而不是后代，并包含一个链接它们的“for”属性

img {
  width: 20vw;
  height: 20vw;
  padding: 2vw;
}

input[type=radio] {
  display: none;
}

img:hover {
  opacity:0.6;
  cursor: pointer;
}

img:active {
  opacity:0.4;
  cursor: pointer;
}

input[type=radio]:checked + label > img {
  border: 20px solid rgb(228, 207, 94);
}

<input type="radio" name="choice" id="choose-1" value="1"/>
<label for="choose-1">
  <img src="https://placehold.it/200/200/" />
</label>

<input type="radio" name="choice" id="choose-2" value="2"/>
<label for="choose-2">
  <img src="https://placehold.it/200/200/" />
</label>