自定义 checkbox 样式的核心是隐藏原生控件（推荐 opacity: 0 + position: absolute），用关联的 label 或伪元素模拟视觉状态，并通过 :checked 伪类控制选中样式，同时保障可访问性与交互反馈。
想自定义 checkbox 的选中样式，又不想看到浏览器默认的方框？核心思路是：**隐藏原生 checkbox，用其后的 label（或伪元素）模拟状态，并借助 :checked 伪类控制视觉表现**。
隐藏原生 checkbox
最直接有效的方式是用 opacity: 0 或 visibility: hidden，推荐用 opacity: 0 —— 它保留点击区域，不影响可访问性；而 display: none 会完全移除控件，导致无法触发选中。
input[type="checkbox"] { opacity: 0; position: absolute; }- 加
position: absolute可防止占位影响布局（尤其配合 label 时）
用 label 关联并承载自定义样式
确保 HTML 中 checkbox 和 label 正确关联（通过 for 属性或包裹结构），这样点击 label 就能触发 checkbox 状态切换：
- 写法一（推荐）：
- 写法二（语义更紧凑）：
- 然后给 label 添加背景、边框、图标等样式，再用
input:checked + label或label input:checked + span控制选中态
用 :checked 配合伪元素画“勾选效果”
不依赖图片，纯 CSS 实现对勾 ✅：在 label 后插入 ::after，默认隐藏，选中时显示并绘制 SVG 路径或旋转线条：
立即学习“前端免费学习笔记（深入）”；
label::after { content: ""; display: inline-block; width: 16px; height: 16px; border: 2px solid #333; margin-right: 8px; }input:checked + label::after { background: #007bff; border-color: #007bff; }- 进阶：用
transform: rotate(45deg)+::before/::after组合画对勾（双线段法）
注意可访问性与交互反馈
隐藏原生控件后，别忘了补全用户需要的反馈：
- 为 label 设置
cursor: pointer，明确提示可点击 - 添加
:focus-within或input:focus + label样式，支持键盘 Tab 导航聚焦 - 若用 JS 监听 change 事件，仍应监听原生 input，而非 label 的 click（避免重复触发或状态不同步）
基本上就这些。关键是把视觉和逻辑解耦：原生 input 负责状态与语义，CSS 负责表现，:checked 是连接两者的桥梁。
