jquery - 如何使用图像代替单选按钮

Question

以下 label 充当 radio button，它显示红色 border 到选定的 button。

我想显示一个图像而不是红色的边框。

这可能吗？

代码:

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  border: 1px solid red;
}

<div class="button">
  <input type="radio" name="a" value="a" id="a" />
  <label for="a">a</label>
</div>
<div class="button">
  <input type="radio" name="a" value="b" id="b" />
  <label for="b">b</label>
</div>
<div class="button">
  <input type="radio" name="a" value="c" id="c" />
  <label for="c">c</label>
</div>

Answer 1

您可以使用伪元素 ::before 和 content:url()，这样图像将停留在 label 的顶部>

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative
}
input[type="radio"]:checked + label::before {
  content: url("//lorempixel.com/15/15");
  position: absolute;
  left:0
}

<div class="button">
  <input type="radio" name="a" value="a" id="a" />
  <label for="a">a</label>
</div>
<div class="button">
  <input type="radio" name="a" value="b" id="b" />
  <label for="b">b</label>
</div>
<div class="button">
  <input type="radio" name="a" value="c" id="c" />
  <label for="c">c</label>
</div>

如果您希望您的图片显示在 label 后面，与之前的代码片段相同，但将 background 添加到 ::before 并且只需要内容:""

input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + label {
  position: relative;
  color:white
}
input[type="radio"]:checked + label::before {
  content: "";
  position: absolute;
  left: -5px;
  top:2px;
  background: url("//lorempixel.com/15/15") 0 0 no-repeat;
  height:15px;
  width:15px;
  z-index:-1
}

<div class="button">
  <input type="radio" name="a" value="a" id="a" />
  <label for="a">a</label>
</div>
<div class="button">
  <input type="radio" name="a" value="b" id="b" />
  <label for="b">b</label>
</div>
<div class="button">
  <input type="radio" name="a" value="c" id="c" />
  <label for="c">c</label>
</div>