例子:

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

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

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

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

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

例子:

小心!此解决方案仅支持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小提琴

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

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浏览器上进行了测试

只是用一个类来隐藏一些…基于https://stackoverflow.com/a/17541916/1815624

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

保持单选按钮隐藏，在点击图像时，使用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;
}