这对我来说很管用:

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

你可以使用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小提琴

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

这对我来说很管用:

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

通过使用标签和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

例子:

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

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

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

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

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