Question

我对image使用radio buttons，但它是not working。请帮帮我们。

这是我的Html

<div class="redio-box"> 
    <input name="sms_notification" class="radio" type="radio" value="1" checked>
      <label for="subscribe">
        <span></span>
        Subscribe
      </label> 
    <input name="sms_notification" class="radio" type="radio" value="0" >
      <label for="unsubscribe">
        <span></span>
        Unsubscribe
      </label>
</div>

这是我的Css

.redio-box .radio {
    display:none; *display:inline; background:none;  width:auto;
}
.redio-box .radio + label { display:inline; font-size:12px; color:#C3B496; }
.redio-box .radio + label span {
    display:inline-block; *display:none;
    width:10px;
    height:10px;
    margin:-2px 2px 0 4px;
    vertical-align:middle;
    background:url(../../images/check_radio_sheet.png) -30px top no-repeat;
    cursor:pointer;
}
.redio-box .radio:checked + label span {
    background:url(../../images/check_radio_sheet.png) -45px top no-repeat;
}

，这是image

Answer 1

这是一个小提琴列表，只需按照它，它很容易理解和实施。

HTML：

<body>    
  <label class="fb" for="fb1">
    <input id="fb1" type="radio" name="fb" value="small" />
    <img src="http://placehold.it/20x20/35d/fff&text=f">
  </label>

  <label class="fb" for="fb2">
    <input id="fb2" type="radio" name="fb" value="big"/>
    <img src="http://placehold.it/40x60/35d/fff&text=f">
  </label>

  <label class="fb" for="fb3">
    <input id="fb3" type="radio" name="fb" value="med" />
    <img src="http://placehold.it/40x40/35d/fff&text=f">
  </label>

  <label class="fb" for="fb4">
    <input id="fb4" type="radio" name="fb" value="long" />
    <img src="http://placehold.it/60x15/35d/fff&text=f">
  </label>
</body>

CSS：

.fb > input[type=radio]{
  display:none;
}
input[type=radio] + img{
  cursor:pointer;
  border:2px solid transparent;
}
input[type=radio]:checked + img{
  border:2px solid #f00;
}

Answer 2

我认为这可能是css的一个问题。这对我有用。

HTML：

<input name="sms_notification" class="radio" type="radio" value="1" checked>
    <label for="subscribe">
        <span></span> Subscribe
    </label> 
<input name="sms_notification" class="radio" type="radio" value="0" >
    <label for="unsubscribe">
        <span></span> Unsubscribe
    </label>

CSS：

.radio {
    display:none; *display:inline; background:none;  width:auto;
}
.radio + label { display:inline; font-size:12px; color:#C3B496; }
.radio + label span {
    display:inline-block; *display:none;
    width:10px;
    height:10px;
    margin:-2px 2px 0 4px;
    vertical-align:middle;
    background:url("https://lh4.ggpht.com/tfumE8xhOyGr33JKe-Wk5TJKNIOt_qaPW5rDKIhvjAis9qmlsgc91Devz0RoHodZoim-jg=s56") -30px top no-repeat;
    cursor:pointer;
}
.radio:checked + label span {
    background:url("https://lh4.ggpht.com/tfumE8xhOyGr33JKe-Wk5TJKNIOt_qaPW5rDKIhvjAis9qmlsgc91Devz0RoHodZoim-jg=s56") -45px top no-repeat;
}

JS Fiddle Link

看看。

Answer 3

我试图让它看起来custom。您需要将::after和::before psuedo类添加到标签中。

我在span;

中包含了单选按钮和相应的标签

<span class="custom-checkbox ">
  <input id="rb1" type="radio" name="r" class="kd-radio ">
  <label for="rb1" class="kd-radio-label">Male</label>
</span>

点击此处查看live demo

单选按钮上的图像不起作用

3 个答案: