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

uubf1zoe 于 2023-04-18 发布在其他

关注(0)|答案(3)|浏览(122)

我有一个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);
}

当我将鼠标悬停在一个正方形上时，正方形的不透明度会改变，但是当我点击正方形时，什么也没有发生（当它应该被选中时，一个边框应该围绕它）。

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>

Html

来源：https://stackoverflow.com/questions/49703517/how-can-i-use-images-instead-of-radio-buttons

3条答案

按热度按时间

zz2j4svz1#

您可以使用：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>

赞(0）回复(0）举报 2023-04-18

sulc1iza2#

您可以使用jQuery在图像上设置onClick函数。为图像分配自定义类，例如：radioImage和jQuery中：

$( ".radioImage" ).click(function() {
    $( this ).css("border", "20px solid rgb(228, 207, 94)");
});

赞(0）回复(0）举报 2023-04-18

qlvxas9a3#

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

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

赞(0）回复(0）举报 2023-04-18

我来回答

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

3条答案

相关问题

热门标签

最新问答