自定义单选按钮

项目中ui给设计图需要自己自定义单选按钮的样式

项目效果图如下：

具体html代码如下：

<div class="tc-item mt20">
           <input type="radio" class="rdo" name="type" checked>
           <img src="http://p79tv85vd.bkt.clouddn.com/BA/image/%E5%BE%AE%E4%BF%A1.png" class="img30">
           <span class="ft20 c4a">微信支付</span> 
         </div>
         <div class="tc-item mt30">
           <input type="radio" class="rdo" name="type">
           <img src="http://p79tv85vd.bkt.clouddn.com/BA/image/%E6%94%AF%E4%BB%98%E5%AE%9D%E6%94%AF%E4%BB%98.png" class="img30">
           <span class="ft20 c4a">支付宝支付</span> 
</div>

css代码如下：

.rdo {
    width: 23px;
    height: 0px;
    background-color: #000;
    margin-right: 30px;
    border-radius: 50%;
    position: relative;
    top: -15px;
}
.rdo:before,.rdo:after {
    content: '';
    display: block;
    position: absolute;
    border-radius: 50%;
    transition: .3s ease;
}
.rdo:before {
    top: 0px;
    left: 0px;
    width: 18px;
    height: 18px;
    background-color: #D8D8D8;
    border: 1px solid #0571FA;
}
.rdo:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 8px;
    background-color: #D8D8D8; 
}
.rdo:checked:after {
    top: 6px;
    left: 6px;
    width: 6px;
    height: 6px;
    background-color:#0571FA;
}
.rdo:checked:before {
    border-color:1px solid #0571FA; 
}