不能直接样式化 checkbox，因浏览器限制其CSS属性无效；必须隐藏原生控件，用label关联并通过:checked伪类驱动伪元素绘制自定义样式，同时确保可访问性与移动端点击区域达标。
为什么不能直接样式化 <input type="checkbox">
浏览器对原生 <input type="checkbox"> 的样式控制极弱，appearance: none 是唯一入口，但仅移除默认外观，不提供可交互的视觉反馈。直接给 input 加 background-color 或 border 完全无效——它根本不会渲染这些属性。
必须用 label + input 隐藏+伪元素联动
核心思路是：隐藏原生 checkbox，用其后的 label（或相邻兄弟选择器）触发状态，再通过 :checked 伪类驱动伪元素（::before/::after）绘制自定义样式。
- 确保
input和label正确关联：input有id，label用for属性指向它；或把input包在label内（更推荐，省去id） - 隐藏原生控件：
input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }——opacity: 0保留可访问性（屏幕阅读器仍能读取），pointer-events: none防止误触干扰伪元素 - 用
label的::before绘制框体，::after绘制勾选符号（如 ✅ 或 SVG 路径）
示例关键 CSS：
label {
position: relative;
padding-left: 28px;
cursor: pointer;
}
label::before {
content: '';
position: absolute;
left: 0; top: 50%;
transform: translateY(-50%);
width: 18px; height: 18px;
border: 2px solid #999;
background: #fff;
}
input[type="checkbox"]:checked + label::after {
content: '✓';
position: absolute;
left: 5px; top: 50%;
transform: translateY(-50%);
color: #4CAF50;
font-size: 14px;
}
:checked 选择器必须紧邻 label 或用 for 关联
如果 input 和 label 不是相邻兄弟（比如中间插了 span），input:checked + label 就失效。此时必须依赖 for 属性 + label 包裹逻辑，或改用 JavaScript 监听 change 事件手动加 class。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：把
input放进label标签内，这样input:checked + label::before可以换成input:checked + ::before（但需注意伪元素挂载位置） - 更稳妥的 CSS 写法：
label input[type="checkbox"]:checked + span::before，前提是 DOM 结构为<label><input><span></span></label> - 不要依赖
~（通用兄弟选择器）做状态联动——它不保证顺序，且无法跨父级生效
移动端点击区域和可访问性容易被忽略
纯视觉定制后，常出现“点不准”或屏幕阅读器报错。两个硬性检查点：
-
label的点击区域至少 44×44px（iOS 最小触控尺寸），用padding或min-width/min-height扩展，别只靠伪元素大小 - 必须保留
aria-checked同步：原生input已自动处理，但若用 JS 模拟状态，需手动设置aria-checked="true/false" - 键盘导航支持：隐藏的
input仍能Tab进入，但焦点样式（:focus）要落到label上，否则用户看不到当前焦点在哪
比如加一句：label:focus-within::before { box-shadow: 0 0 0 2px #007bff; }
:checked 作用域没对齐，其次就是移动端点击热区不够大。样式可以炫酷，但先让每个像素都响应正确。 
