Question

以下label充当radio button，向所选border

显示红色button.

我想要显示图像而不是红色border。

这可能吗？

代码：

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

之上

＆＃13;

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
}

＆＃13;

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

＆＃13;

如果您希望您的图片显示在上一个代码段label相同的内容之后，而是将background添加到::before，并且只有content:""

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

您可以使用"[{"id":"8"},{"id":"9"},{"id":"10"}]"和background-image轻松完成，如下所示。

background-position

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  background-image: url("https://developer.tizen.org/sites/default/files/images/5.3.2.d.png");
  background-position: -169px -31px;
  background-repeat: no-repeat;
  display: block;
  height: 37px;
  width: 37px;
}

input[type="radio"]:checked + label {
  background-position: -44px -31px;
}

Answer 3

不确定

如果您希望图片显示在标签后面，请使用背景：

input[type="radio"]:checked + label {
    background: url(http://placehold.it/100x100);
}

如果要将图像用作边框，可以使用CSS3 border-image属性：

input[type="radio"]:checked + label {
    border-image: url(http://placehold.it/100x100) 300 round;
}

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

3 个答案: