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

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。

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小提琴

通过使用标签和span元素，可以将图像放置在单选按钮的位置。

   <div class="customize-radio">
        <label>Favourite Smiley</label><br>
        <label for="hahaha">
        <input type="radio" name="smiley" id="hahaha">
        <span class="haha-img"></span>
        HAHAHA
        </label>
        <label for="kiss">
        <input type="radio" name="smiley" id="kiss">
        <span class="kiss-img"></span>
        Kiss
        </label>
        <label for="tongueOut">
        <input type="radio" name="smiley" id="tongueOut">
        <span class="tongueout-img"></span>
        TongueOut
        </label>
    </div>

单选按钮应该隐藏，

.customize-radio label > input[type = 'radio'] {
    visibility: hidden;
    position: absolute;
}

图像可以在span标签中给出，

.customize-radio label > input[type = 'radio'] ~ span{
    cursor: pointer;
    width: 27px;
    height: 24px;
    display: inline-block;
    background-size: 27px 24px;
    background-repeat: no-repeat;
}
.haha-img {
    background-image: url('hahabefore.png');
}

.kiss-img{
    background-image: url('kissbefore.png');
}
.tongueout-img{
    background-image: url('tongueoutbefore.png');
}

点击单选按钮改变图像，在输入标签中添加选中状态，

.customize-radio label > input[type = 'radio']:checked ~ span.haha-img{
     background-image: url('haha.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.kiss-img{
    background-image: url('kiss.png');
}
.customize-radio label > input[type = 'radio']:checked ~ span.tongueout-img{
        background-image: url('tongueout.png');
}

如果你有任何疑问，请参考下面的链接，因为我已经从下面的博客中采取了解决方案， http://frontendsupport.blogspot.com/2018/06/cool-radio-buttons-with-images.html

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

这对我来说很管用:

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

只是用一个类来隐藏一些…基于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>