Question

我有一个单选按钮：

            <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

您的html结构错误，标签应包含＆＃34; for＆＃34;引用输入id的属性，输入应该不在标签

中

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用jQuery在图像上设置onClick功能。为图像分配一个自定义类，例如：radioImage和jQuery：

tempfile

Answer 3

您应该将for的{{1}}属性设置为您想要的label名称。在这种情况下，它可能看起来像这样：

input

使用图像而不是单选按钮（HTML / CSS）

3 个答案: