radio单选按钮样式重写

这是html

<div class="quanxian-option">
    <input  class="radio-btn" type="radio" name="quanxian" value="a" id="one"><label for="one" class="txt">校验管理</label>
    <input  class="radio-btn" type="radio" name="quanxian" value="a" id="two"><label for="two" class="txt">教师</label>
    <input  class="radio-btn" type="radio" name="quanxian" value="a" id="thr"><label for="thr" class="txt">教具管理</label>
    <input  class="radio-btn" type="radio" name="quanxian" value="a" id="fou"><label for="fou" class="txt">生活教师</label>
</div>

这是less

.quanxian-option{
    .txt{
        cursor:pointer;
        //伪元素写的新的按钮样式
        &:before{
            display:inline-block;
            content:'';
            width:14px;
            height:14px;
            background:#fff;
            border:1px solid #b4b4b4;
            position:absolute;
            margin-top: 2px;
            margin-left:-20px;
        }
    }
    .radio-btn{
        cursor:pointer;
        vertical-align: middle;
        margin-right:5px;
        &:not(:first-child){
            margin-left:20px;
        }
        //激活时的样式
        &:checked + label::before {
            background-color: #82b64a;
            content:'✓';
            font-size:14px;
            line-height:14px;
            text-align:center;
            color:#fff;
        }
    }
}

原理：label用伪元素重新写一个样式，把原来的小圆点覆盖或者直接隐藏
无图无真相，不看广告看疗效，上图
使用前：

使用后：