综合运用：如何修改美化radio、checkbox的默认样式

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。

原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给元素设置为透明，然后通过定位让用户看到的是元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即input[type=checkbox]:checked+label{}

一、利用css3伪元素实现样式修改

html代码

   <p>您的性别：</p>
    <div class="radio-sex">
        <input type="radio" id="sex1" name="sex">
        <label for="sex1"></label>
        <span>男</span>
    </div>
    <div class="radio-sex">
        <input type="radio" id="sex2" name="sex">
        <label for="sex2"></label> 女
    </div>

css样式

.radio-sex {
   
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio-sex input {
   
    vertical-align: middle;
    margin-top: -2px;
    margin-bottom: 1px;
    /* 前面三行代码是为了让radio单选按钮与文字对齐 */
    width: 20px;
    height: 20px;
    appearance: none;/*清楚默认样式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    /* 注意不能设置为display:none*/
}

.radio-sex label {
   
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    /*注意层级关系，如果不把label层级设为最低，会遮挡住input而不能单选*/
    width