必须用 appearance: none 清除默认样式并配合伪元素实现自定义复选框，:checked 单独设置 background-color 无效；需绑定 label、保障可访问性，确保语义与行为一致。
不能只靠 :checked 改变原生复选框的背景或边框颜色——它对未选中态基本无效，且 Safari/Chrome 表现不一致；真正可控的是用 appearance: none 清掉默认渲染，再靠伪元素画出“被选中”的视觉层。
为什么 :checked 单独加 background-color 常常没反应
浏览器对 <input type="checkbox"> 的原生控件做了强封装：background-color、border-radius 等样式在未选中时几乎全被 UA 样式覆盖；即使加了 :checked，部分旧版 Safari 仍只响应 accent-color，而忽略自定义背景。
-
accent-color只控制勾选图标颜色（如蓝色小点），无法改方框底色或加阴影 -
input[type="checkbox"]:checked { background: #007bff; }在 Firefox 中可能生效，在 Chrome 中常被忽略 - 直接写
background但没设width/height，元素会坍缩成不可见点
必须配合 appearance: none 才能真正接管样式
这是绕过浏览器私有渲染的起点。不加这个，所有后续伪元素都可能错位或失效。
- 务必同时写三行：
appearance: none、-webkit-appearance: none、-moz-appearance: none - 紧接着要设
width和height（比如18px），否则伪元素找不到锚点 - 推荐加
vertical-align: middle对齐文字，避免 baseline 错位 - 别忘了
cursor: pointer，否则用户看不出可点击
用 ::before + :checked 绘制开关效果
所谓“自定义开关”，本质是两个状态：未选中时一个空方框，选中时填充色+对勾。这得靠伪元素分层实现。
input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 42px;
height: 24px;
position: relative;
vertical-align: middle;
cursor: pointer;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 42px;
height: 24px;
border: 2px solid #ccc;
border-radius: 12px;
background: #f5f5f5;
}
input[type="checkbox"]:checked::before {
background: #007bff;
border-color: #007bff;
}
input[type="checkbox"]::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: white;
transition: transform 0.2s;
}
input[type="checkbox"]:checked::after {
transform: translateX(18px);
}
关键点：
-
::before是“轨道”，::after是“滑块”，两者都需position: absolute定位 - 滑块移动靠
transform: translateX()，比改left更性能友好 - 别漏掉
transition，否则开关动作生硬 - 如果要用对勾代替圆点，把
::after换成边框旋转（border: 2px solid white; transform: rotate(45deg)）
label 绑定和可访问性容易被忽略
很多开关失效，根本不是 CSS 问题，而是 HTML 结构断了关联。
- 必须确保
<input id="switch-1">和<label for="switch-1"></label>的id/for匹配，或用嵌套方式：<label><input type="checkbox"> 开关</label> - 没绑定时，点击 label 文字不会触发勾选，
:checked永远不会生效 - 加
focus-visible样式（如outline: 2px solid #007bff）对键盘用户必不可少 - 别用
opacity: 0隐藏原生控件——屏幕阅读器可能跳过；推荐position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
最麻烦的从来不是画个开关，而是让它的行为和语义跟原生控件完全一致——这点在表单验证、焦点管理、读屏支持上一碰就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
