html多选框_CSS 美化复选框 无图片方式

今天和大家分享一个不使用图片美化复选框的方式。来看下效果图吧，如下是3种不同状态下的效果：

一. Html结构

注：label 标签的 for 属性值必须指定为 input 的 id 名称。

二. CSS 代码

1. 将原有的 checkbox 标签透明度设为0；

2. label:after 的宽高设置 20px 是因为 border 占据了4px；

3. checkbox 的 indeterminate 状态大家用的可能比较少(效果图中的第2个状态)，只能通过 js 进行设置，这种情况通常用在树型结构或多选表格中，表示部分选中。