直接修改 checkbox 样式行不通，因浏览器限制其样式属性；可靠做法是隐藏原生控件，用 label 或兄弟元素配合 :checked 和伪元素实现自定义外观，并确保可访问性。
为什么直接改 input[type="checkbox"] 样式行不通
浏览器对原生 input[type="checkbox"] 的样式控制极其有限，border、background、width 等属性大多被忽略，连 appearance: none 在部分旧版 Safari 里也不稳定。强行覆盖容易触发渲染异常或失去可访问性。
真正可靠的做法是：隐藏原生控件，用其后的 label 或相邻兄弟元素（配合 + 或 ~）触发状态，再通过 ::before/::after 伪元素绘制自定义外观。
Less 中如何用 &:checked 配合伪元素实现开关效果
关键在于利用 input 的状态变化驱动后续元素的样式切换。Less 支持嵌套写法，能清晰表达父子/兄弟关系。
- 确保 HTML 结构中
input和自定义容器（如span或label）处于同一层级，且input在前 - 在 Less 中用
input[type="checkbox"]隐藏原生控件：position: absolute; opacity: 0; width: 0; height: 0; - 用
+ .custom-checkbox选中紧邻的自定义容器，再用&:checked + .custom-checkbox::before控制未选中态，&:checked + .custom-checkbox::after控制选中态（比如滑块位移） - 注意
z-index和pointer-events：伪元素需可点击区域仍落在label上，否则无法触发勾选
label 包裹方案比兄弟选择器更稳妥的场景
当 DOM 结构不可控（比如组件库生成的 markup），或需要支持键盘 Tab 导航与空格切换时，label[for] 或包裹式写法更健壮。
立即学习“前端免费学习笔记（深入）”；
Less 中可这样组织：
.checkbox-wrapper {
position: relative;
display: inline-flex;
align-items: center;
input[type="checkbox"] {
position: absolute;
opacity: 0;
cursor: pointer;
&:checked + .checkbox-label::before {
background-color: #007bff;
border-color: #007bff;
}
&:checked + .checkbox-label::after {
transform: translateX(16px);
}
}
.checkbox-label {
position: relative;
padding-left: 32px;
cursor: pointer;
&::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border: 2px solid #ccc;
border-radius: 4px;
background: #fff;
}
&::after {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: #fff;
transition: transform 0.2s ease;
}
}
}
这种结构下，点击文字或方框任意位置都能触发，无障碍支持也更好。
兼容性与可访问性容易被忽略的点
伪元素方案最大的陷阱不是视觉效果，而是语义丢失和焦点管理。
- 必须保留
input的id和label[for]关联，否则屏幕阅读器无法识别控件用途 - 不要给伪元素加
tabindex="-1"，它本身不可聚焦；焦点应始终落在原生input上（哪怕它透明不可见） - IE11 不支持
appearance: none，但opacity: 0+position: absolute已足够隐藏 - 动画建议用
transform和opacity，避免触发布局重排；transition写在非状态规则里（如.checkbox-label::after），而非只写在:checked下
最常漏掉的是 aria-checked —— 如果用 JS 动态控制状态，记得同步更新该属性，否则 AT 工具会误判。
