<label> <input type="checkbox" value="option1"> 全部 </label>设置复选框样式

可以使用CSS来设置复选框的样式，下面是一个示例代码：

HTML代码：

<label>
  <input type="checkbox" value="option1">
  全部
</label>

CSS代码：

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid #ccc;
  border-radius: 4px;
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  vertical-align: middle;
  cursor: pointer;
}

input[type="checkbox"]:checked::before {
  content: "\2713";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

解释一下上面的代码：

- `-webkit-appearance: none;`、`-moz-appearance: none;`、`appearance: none;`用来去掉浏览器默认的复选框样式；
- `border: 2px solid #ccc;`设置边框；
- `border-radius: 4px;`设置边框圆角；
- `width: 20px;`、`height: 20px;`设置复选框的宽高；
- `display: inline-block;`、`position: relative;`、`vertical-align: middle;`用来让复选框垂直居中；
- `cursor: pointer;`设置鼠标指针为手型，表示可以点击。

`input[type="checkbox"]:checked::before`选择器用来设置复选框勾选时的样式，其中`content: "\2713";`用来设置勾选图标，`\2713`是勾选符号的 Unicode 码。`position: absolute;`、`top: 50%;`、`left: 50%;`、`transform: translate(-50%, -50%);`用来将勾选图标居中。`font-size: 16px;`、`color: #fff;`、`background-color: #007bff;`用来设置勾选图标的样式。`border-radius: 50%;`、`width: 20px;`、`height: 20px;`、`line-height: 20px;`、`text-align: center;`用来让勾选图标圆形居中。