html代码:
<div class="test-input" >
<label class="test-label">
<input class="test-radio" type="radio" name="radio" value="0" checked="checked">
<span class="silde-lr-btn"></span>
<span class="silde-text">L</span>
</label>
<label class="test-label">
<input class="test-radio" type="radio" name="radio" value="1">
<span class="silde-lr-btn" ></span>
<span class="silde-text">R</span>
</label>
</div>
css代码:
<style>
.test-input{
width:200px;display:contents;
}
.test-label{
position:relative;
font-size: 0;
}
.test-radio{
display:none;
}
.silde-lr-btn{background-color: rgb(181, 181, 181);
width: 32px; display: inline-block;
height: 20px;
text-align: center;
}
.test-radio:checked+ .silde-lr-btn:after{background-color: rgb(233, 150, 5);
content: "";
color: #fff;
width: 32px;
height: 20px;
position: absolute;
left: 0;
}
.silde-text{position: absolute; font-size: 14px; z-index: 1;
left: 13px;}
.test-radio:checked~ .silde-text{
color:#fff;
}
</style>
显示效果如图