1.想要实现的效果是:
2.思路
隐藏原本单选框--->自定义选择框---->调整相对应样式
3.直接上代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!-- <script type="text/javascript" src="jquery-2.1.4.min.js"></script> --> <style> .label { /*设置label的样式*/ width: 100%; padding: 10px 0px; display: block; line-height: 20px; position: relative; font-weight: normal; position: relative; } .radio .option { /*把优化后的按钮图片设置为该div的背景图片，把该div定位到原生样式的上方，遮盖住原生样式。*/ width: 130px; height: 140px; position: absolute; top: 8px; left: 35px; } .radio input[type="radio"] { /*把原生样式隐藏掉*/ display: inline-block; margin-right: 15px; opacity: 0; } input[type="radio"]:checked+div { /*当radiuo被选中时，把input下边的div标签的背景图片替换掉*/ background: url('2.png') no-repeat; background-size: 16% 16%; background-position: 105px 113px; border: 2px solid #ff8a00; border-radius: 7px; } </style> </head> <body> <!--HTML代码结构如下：--> <div style="display: flex;justify-content: center;"> <div class="radio"> <label class="label" style="position: relative;"> <input type="radio" name="sex" value="" checked/> <div class="option"></div><!--该div盛放的是优化后的按钮图片--> <img src="图片路径" alt=""> </label> </div> <div class="radio"> <label class="label" style="position: relative;"> <input type="radio" name="sex" value="" /> <div class="option"></div><!--该div盛放的是优化后的按钮图片--> <img src="图片路径" alt=""> </label> </div> </div> </body> </html>
4.如果想监听选择的变化(引入jQuery)
$('input[type=radio][name=radio_type]').change(function() {
console.log(this.value);
});