CSS 如何实现自定义复选框样式？

Question

CSS 如何实现自定义复选框样式？

仓乃文 · Accepted Answer

原生复选框样式难以定制，通过隐藏原生 input 并用 label 伪元素模拟，可以实现完全自定义的复选框样式。

```css
.custom-checkbox input[type="checkbox"] {
  display: none;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
}

.checkmark {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
  position: relative;
  transition: all 0.3s ease;
}

.custom-checkbox input:checked + .checkbox-label .checkmark {
  background: #3498db;
  border-color: #3498db;
}

.custom-checkbox input:checked + .checkbox-label .checkmark::after {
  content: ";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
```

补充说明：
- 核心：隐藏原生 input，用 label 的伪元素绘制自定义样式
- 利用 :checked 伪类和兄弟选择器 + 或 ~ 联动样式变化
- 对勾用 border + rotate(45deg) 绘制，无需图片或 SVG
- 同样技巧适用于 radio、switch toggle 等表单控件