重新设计单选按钮radio

<style>
input[type=radio] {
    width: 15px;
    height: 12px;
    position: relative;
    top: -22px;
    left: 15px;
}
​
input[type=radio]:after {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    content: " ";/*内容一定为空*/
    background-color: #fff;/*把默认样式遮住*/
    display: block;/*使其具有块元素属性*/
    visibility: visible;/*可见*/
    padding: 0px 3px;/*变椭圆*/
    border-radius: 50%;/*画圆*/
    border: 1px solid #ebebeb;
}
/*只有选中，此样式才生效*/
input[type=radio]:checked:before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    width: 15px;
    height: 15px;
    z-index: 1;/*没这句无法显示*/
    border-radius: 50%;
    background-color: #40c8c4;
    /*给不同背景色表示选中状态*/
}
</style>
<div>男</div>
<input type="radio" name="gender" checked>
​<div>女</div>
<input type="radio" name="gender">
​