直接修改 input[type="checkbox"] 样式无效，因浏览器限制其样式控制，必须先设 appearance: none（含 -webkit- 前缀），再配合 display 布局、label 正确绑定及结构严格同级，否则 :checked 伪类和自定义样式均失效。
为什么直接改 input[type="checkbox"] 样式没反应
因为浏览器对原生复选框的样式控制极弱，appearance: none 是必须的第一步，否则其他 CSS（比如 background-color、border-radius）基本无效。不加这句就调颜色、改大小，全是徒劳。
常见错误是只写 input[type="checkbox"] { width: 20px; height: 20px; }，但没加 appearance: none，结果在 Chrome/Firefox/Safari 上表现不一致，甚至完全不生效。
-
appearance: none必须配合display: inline-block或flex等显式布局行为才稳定 - 某些旧版 Safari 需要
-webkit-appearance: none前缀 - 隐藏后必须用
label承接点击区域，否则可访问性崩溃（键盘Tab+Space失效）
:checked ~ .custom-label::before 选择器总不触发
这个兄弟选择器（~）依赖严格的 HTML 结构：同级、同父、input 在 label 前面。只要中间插一个 span、一个注释、或者 label 被提到外层 div，整个链路就断了。
Bootstrap 4 的 .custom-control-input:checked ~ .custom-control-label::before 就栽在这儿——很多人把 label 和 input 拆到不同容器里，或者用 React 动态渲染时顺序错乱。
- 检查开发者工具里
input的直接父元素是否同时包含它和对应的label -
label的for属性值必须与input的id完全一致（区分大小写、不可有空格） - 更稳的写法是用相邻兄弟选择器
input + label，要求input紧邻label，结构约束更强
怎么让自定义对勾变成 SVG 或 Unicode 字符
伪元素 ::after 是画对勾最轻量的方式，不用额外 DOM 节点。但要注意两件事：SVG 的 URL 编码必须正确，Unicode 字符要选好字体支持的。
比如这个绿色对勾：
.custom-checkbox input:checked + label::after {
content: "";
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M3.1 4.9l-1.4 1.4L0 4.6l1.4-1.4 1.7 1.7L6.9 1.4 8.3 2.8z'/%3e%3c/svg%3e");
background-size: 100% 100%;
}
-
%23fff是#fff的 URL 编码，填错会导致 SVG 不显示或变黑 - 如果用 Unicode（如
content: "✓"），得确保font-family支持该字符，否则 fallback 到系统默认字体可能渲染成方块 - 别忘了给
::after设display: block、position: absolute等定位属性，否则它可能不出现
加了 custom-control-inline 后复选框挤在一起
.custom-control-inline 只设了 display: inline-flex，但没重置 margin 和 vertical-align，导致多个控件横向堆叠时基线错位、间距消失、文字换行异常。
典型现象：两个复选框并排，第二个的 label 文字突然掉到下一行；或者所有 label 都往上偏移，和 checkbox 不对齐。
- 手动补一句
.custom-control-inline { margin-right: 1rem; vertical-align: middle; }就能解决大部分错位 - 如果用 Flex 布局替代 inline，推荐直接写
display: flex; gap: 0.75rem;，比 inline-flex 更可控 - 移动端要注意
inline-flex容易触发最小宽度限制，导致换行，此时加white-space: nowrap反而更糟，不如用 Grid
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
