【前端随记01】纯css自定义checkbox复选框样式，看这一篇就够了

由于，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着可以通过label的点击事件来处理我们的Checkbox复选框。因此，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做样式。1. 首先，需要添加一段CSS隐藏所有的Checkbox复选框。(img-vvd3YPOO-1710902663903)]3. label标

.胜天半子.

1507人浏览 · 2024-03-20 10:44:35

.胜天半子. · 2024-03-20 10:44:35 发布

因此，我们需要动脑筋修改checkbox的样式了。

1. 首先，需要添加一段CSS隐藏所有的Checkbox复选框。之后我们改变它的外观

input[type=checkbox] {

visibility: hidden;

}

隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素。

由于，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着可以通过label的点击事件来处理我们的Checkbox复选框。

因此，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做样式。

.checkBox {

position: relative;

width: 0.48rem;

height: 0.48rem;

background: #ffffff;

}

3. label标签用于Click事件和我们要定义的复选框的方框样式。

.checkBox label {

cursor: pointer;

position: absolute;

width: 0.48rem;

height: 0.48rem;

top:0;

left: 0;

background: #ffffff;

border: 0.01rem solid #c2c2c2;

border-radius: 0.04rem;

}

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。