复选框作为网页中比较常见的一个组件,有的时候我们需要对它进行美化,但是我们无法直接为其定义样式,所以我们需要一些其它的办法。
表单元素中有label
元素和 for
属性(id与for绑定),当我们点击label
标签时,对应的表单元素就会有所反应。我们就是依据这个特性来实现的。
html:
- 1
- 2
- 3
- 4
既然是自定义,我们就要把label
伪装成复选框的样子,比较常见的是方框状,所以我们就有了如下的CSS样式。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
这样我们就为label
元素定义为圆角的正方形边框,然后就需要根据复选框的状态进行相应的样式调整。
- 1
- 2
- 3
- 4
- 5
- 6
上述代码分别为label
元素定义了复选框选中状态时应具有的样式,比如背景色变灰、而且添加了“√”,\2714就是相应的编码。
这样我们就大功告成了,但是别忘了,我们要将自带的checkbox
定义为display:none;
这样就可以隐藏自带的复选框了。