css怎么美化复选框样式
利用label挂钩checkbox的特点来实现。
当html代码中，label的for属性值和checkbox的id值一样的时候，label就可以控制checkbox的选择了。
html代码如下：
<div id="check">
<input type="checkbox" id="btn-check">
<label for="btn-check"><span>全天</span></label>
</div>为label的伪元素添加背景图片，覆盖真正的checkbox对象，这样，既有图片的美观效果，又有checkbox一切的交互行为。
设计一个图片如下，默认状态，点击状态，不可用状态。（相关课程推荐：css视频教程）
这里使用了定位，不然不能覆盖原始的复选框。而且文字和图片之间要间隔，文字也需要设置为定位对象。总之，这里都是定位关系。
这个效果只兼容IE9以上。
CSS
#check {
position: relative;
}
input[type=checkbox]+label {
position: absolute;
width: 60px;
height: 20px;
}
input[type=checkbox]+label:before {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: url(images/btn1.webp) no-repeat;
}
input[type=checkbox]+label span {
font-size: 14px;
position: absolute;
left: 30px;
}
input[type=checkbox]:checked+label:before {
background-position: -28px 0;
}
input[type=checkbox] {
position: absolute;
left: 0;
top: 0;
}本文来自css答疑栏目，欢迎学习！
以上就是css怎么美化复选框样式的详细内容，更多请关注易知道|edz.cc其它相关文章！
