这是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用伪元素重新写一个样式,把原来的小圆点覆盖或者直接隐藏
无图无真相,不看广告看疗效,上图
使用前:
使用后: