在<label>中包装无线电和图像 隐藏单选按钮(不要使用display:none或visibility:hidden，因为这样会影响可访问性) 目标图像旁边的隐藏无线电使用相邻兄弟选择器+ 不要忘记在alt属性中提供替代文本，特别是因为它的功能是单选按钮的标签

/* HIDE RADIO */ [type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } /* IMAGE STYLES */ [type=radio] + img { cursor: pointer; } /* CHECKED STYLES */ [type=radio]:checked + img { outline: 2px solid #f00; } <label> <input type="radio" name="test" value="small" checked> <img src="https://via.placeholder.com/40x60/0bf/fff&text=A" alt="Option 1"> </label> <label> <input type="radio" name="test" value="big"> <img src="https://via.placeholder.com/40x60/b0f/fff&text=B" alt="Option 2"> </label>

不要忘记在你的标签中添加一个类，在CSS中使用这个类。

自定义样式和动画

下面是使用<i>元素和伪元素后面的::的高级版本:

body{color:#444;font:100%/1.4 sans-serif;} /* CUSTOM RADIO & CHECKBOXES http://stackoverflow.com/a/17541916/383904 */ .rad, .ckb{ cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .rad > input, .ckb > input{ /* HIDE ORG RADIO & CHECKBOX */ position: absolute; opacity: 0; width: 0; height: 0; } /* RADIO & CHECKBOX STYLES */ /* DEFAULT <i> STYLE */ .rad > i, .ckb > i{ display: inline-block; vertical-align: middle; height: 16px; transition: 0.2s; box-shadow: inset 0 0 0 8px #fff; border: 1px solid gray; background: gray; } .rad > i { width: 16px; border-radius: 50%; } .ckb > i { width: 25px; border-radius: 3px; } .rad:hover > i{ /* HOVER <i> STYLE */ box-shadow: inset 0 0 0 3px #fff; background: gray; } .rad > input:focus + i { /* FOCUS <i> STYLE */ outline: 1px solid blue; } .rad > input:checked + i{ /* (RADIO CHECKED) <i> STYLE */ box-shadow: inset 0 0 0 3px #fff; background: orange; } /* CHECKBOX */ .ckb > input + i::after{ content: ""; display: block; height: 12px; width: 12px; margin: 2px; border-radius: inherit; transition: inherit; background: gray; } .ckb > input:focus + i { outline: 1px solid blue; } .ckb > input:checked + i::after{ /* (RADIO CHECKED) <i> STYLE */ margin-left: 11px; background: orange; } <label class="rad"> <input type="radio" name="rad1" value="a"> <i></i> Radio 1 </label> <label class="rad"> <input type="radio" name="rad1" value="b" checked> <i></i> Radio 2 </label> <br> <label class="ckb"> <input type="checkbox" name="ckb1" value="a" checked> <i aria-hidden="true"></i> Checkbox 1 </label> <label class="ckb"> <input type="checkbox" name="ckb2" value="b"> <i aria-hidden="true"></i> Checkbox 2 </label>

这里有一个非常简单的例子

input[type="radio"]{ display:none; } input[type="radio"] + label { background-image:url(http://www.clker.com/cliparts/c/q/l/t/l/B/radiobutton-unchecked-sm-md.png); background-size: 100px 100px; height: 100px; width: 100px; display:inline-block; padding: 0 0 0 0px; cursor:pointer; } input[type="radio"]:checked + label { background-image:url(http://www.clker.com/cliparts/M/2/V/6/F/u/radiobutton-checked-sm-md.png); } <div> <input type="radio" id="shipadd1" value=1 name="address" /> <label for="shipadd1"></label> value 1 </div> <div> <input type="radio" id="shipadd2" value=2 name="address" /> <label for="shipadd2"></label> value 2 </div>

演示:http://jsfiddle.net/La8wQ/2471/

这个例子基于这个技巧:https://css-tricks.com/the-checkbox-hack/

我在chrome、firefox和safari浏览器上进行了测试

例子:

小心!此解决方案仅支持css。

我建议你利用CSS3来做到这一点，通过隐藏默认输入单选按钮与CSS3规则:

.options input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

几天前我只是举了个例子。

JSFiddle 如何使用单选按钮的图像- Gist

你可以使用CSS。

HTML(仅供演示，可自定义)

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

CSS

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

js小提琴

这对我来说很管用:

输入(type =“广播”){ margin-right: 1 em; 外观:无; 宽:12 px; 高度:12 px; 背景图片:url(“checkbox_off.gif”); ｝ 检查输入(type =“广播”):{ 背景图片:url(“checkbox_on.gif”); ｝

保持单选按钮隐藏，在点击图像时，使用JavaScript选择它们，并设置图像的样式，使其看起来像选中的。这是加价

<div id="radio-button-wrapper">
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
    <span class="image-radio">
        <input name="any-name" style="display:none" type="radio"/>
        <img src="...">
    </span>
</div>

和 JS

 $(".image-radio img").click(function(){
     $(this).prev().attr('checked',true);
 })

CSS

span.image-radio input[type="radio"]:checked + img{
    border:1px solid red;
}