美化单选框

老规矩，先上图

第一种：

第二种：

上面两种长得差不多，但是是用两种方式实现的

第一种：通过修改css实现

html

<div>
    <input type="radio" class="rdo" name="sex" checked style="">
    <label class="rdo-text">男</label>
    <input type="radio" class="rdo" name="sex">
    <label class="rdo-text">女</label>
</div>

css(重头戏)

.rdo {
    width: 0px;
    margin-right: 25px;/*选项之间的距离*/
    position: relative;
}
    .rdo:before,.rdo:after {
    content: '';
    position: absolute;
    border-radius: 50%; /*圆角*/
    transition: .4s ease; /*中点跳转的速度*/
}
    .rdo:before {/*所有选项*/
    width: 18px;
    height: 18px; /*外圆的大小*/
    background-color: #fff; /*圆环的颜色*/
    border: 1px solid pink;/*外圆的边框*/
}
    .rdo:after {/*未选中的中点*/
    top: 6px;
    left: 6px;
    width: 8px;
    height: 8px;
    background-color: #fff; /*未选的中点的颜色*/
}
    .rdo:checked:after {/*选中的中点*/
    top: 4px;
    left: 4px;
    width: 12px;
    height: 12px;
    background-color:pink; /*选中的中点*/
}
    .rdo:checked:before {
     border-color:pink; /*选中的外圆边框*/
}
    .rdo-text{
        font-size: 15px;
        position: relative;
        top: 3px;
        left: -6px;
}

第二种：css+js(模拟单选框)
html

<div class="sex">  
    <div class="women">  
        <label for="women">女</label>  
        <div class="user-defined">  
            <span class="circle active"></span>  
        </div>
    </div>  
    <div class="man">  
        <label for="man">男</label>  
        <div class="user-defined">  
            <span class="circle"></span>  
        </div>  
    </div>  
</div>

css

.sex > div { 
        position: relative;
        float: left;
        height: 35px;
        line-height:35px;
         }  
    .sex label { 
        display: block; 
        width: 50px; 
        height:35px; 
        line-height: 35px; 
        position: absolute;
        left: 20px}  
    .user-defined {
        position: absolute; 
        top: 0; bottom: 0;
        margin: auto;
        width:12px;  
        height: 12px;/*外圆大小*/
        border: 1px solid red; /*外圆边框*/
        border-radius: 50%; 
        cursor: pointer;/*鼠标手*/
        }  
    .circle  { /*未选中的内圆*/
        display: block; 
        width: 8px; 
        height: 8px; 
        margin-top:2px;
        margin-left: 2px; 
        background-color: #fff; 
        border-radius: 50%; }  
    .active  { /*选中的内圆*/
        background-color: #f2572c; 
        }  

js

<script src="js/jquery.min.js"></script>
        <script>
        $(".women").on("click",function() {  
            $(".user-defined>span",this).addClass("active");  
            $(this).next().children().last().children().removeClass("active");  
        });  
        $(".man").on("click",function() {  
            $(".user-defined>span",this).addClass("active");  
            $(this).prev().children().last().children().removeClass("active");  
        }); 
        </script>

---

写完感觉自己美美哒~

上面两种方法都不兼容IE，蓝瘦！