radio用自定义切图来美化样式,demo是选择支付方式,如果是文字的话把img标签换成span即可。
同一类的,name要统一,设置成一样。
html代码:
同一类的,name要统一,设置成一样。
css代码:
.order-payicon{
width: 760px;
height: 62px;
}
input[type="radio"] {
display: none;
visibility: hidden;
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
}
input[type="radio"]+label {
background: url(../img/check_u.png) no-repeat;
background-size: 34px 62px;
vertical-align: middle;
height: 62px;
width: 34px;
display: inline-block;
}
input[type="radio"]+label+img {
padding-right: 25px;
}
input[type="radio"]:checked+label {
background: url(../img/check_d.png) no-repeat;
background-size: 34px 62px;
}
未选中时的按钮:
选中时的按钮:
支付方式:
效果图: