HTML radio自定义美化样式。

自己写了个radio样式，根据项目需求写的。上传到博客，方便以后使用。
先贴css样式，样式不多，比较简单，易懂。

---

.radio_btn{
            width: 30px;
            height: 30px;
            background: url(../images/dx.png) no-repeat;
            background-size: cover;
            display: inline-block;
            /*background: orange;*/
            border-radius:50%;
            position: relative;
            vertical-align: middle;
        }

        .radio_btn input{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 100;
        }

        .radio_btn span{
            background: url(../images/dx-.png) no-repeat;
            background-size: cover;
            width: 100%;
            height: 100%;
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            border-radius: 50%;
        }

        .radio_btn input[type=radio]+span{
            opacity: 0;
        }
        .radio_btn input[type=radio]:checked+span{
            opacity: 1;
        }

HTML部分：

<div  class="radio_btn">
            <input type="radio" name="sex" id="man" value="" checked="checked" />
            <span>span>
        div>
        <div  class="radio_btn">
            <input type="radio" name="sex" id="male" value="" />
            <span>span>
        div>

注意：图片是本地所有，可根据自己的需求来。可以定义成背景颜色来显示。