appearance: none是自定义表单控件样式的前提，不加则浏览器强制渲染原生样式并忽略后续CSS；需兼容写法如-webkit-appearance: none，现代项目可仅用标准版。
为什么appearance: none是第一步，且必须加
不加这句，浏览器会强行渲染原生控件，所有后续样式都会被忽略。它不是可选项，而是解锁自定义能力的钥匙。不同浏览器默认行为差异大：Chrome 会保留部分边框和尺寸逻辑，Firefox 对 width/height 更敏感，Safari 在高 DPI 屏上可能缩放异常。加了 appearance: none 后，你才真正拿到一个“空白画布”。注意它需要前缀兼容：-webkit-appearance: none、-moz-appearance: none，现代项目可只写标准版，但若需支持旧版 Firefox（
input[type="checkbox"] + label::before 这个选择器怎么写才生效
关键不在“怎么写”，而在“结构是否匹配”。这个相邻兄弟选择器要求：input 和 label 必须是同级元素，且 input 紧挨着 label 前面，中间不能插任何标签、空格或换行符。常见失效场景包括：
- HTML里写了
<input><span></span><label></label>——span隔开了兄弟关系 - 用了
for/id绑定但把label放到了别的 div 里 —— 它就不是input的相邻兄弟了 - 用 Prettier 或 Vue 模板自动换行，导致 DOM 中实际存在文本节点（哪怕只是空格）——也会断开相邻关系
验证方法：在开发者工具里选中 input，看它的下一个同级节点是不是 label；如果不是，就得调整 HTML 结构。
改对勾颜色和图标，为什么::after比background-image更可控
因为 ::after 是纯 CSS 渲染层，能响应 color、font-size、transform，而 background-image（哪怕是 data URL SVG）一旦写死，颜色、大小、旋转都得重写整个 URL。例如：
立即学习“前端免费学习笔记（深入）”；
.custom-checkbox:checked + label::after {
content: "✓";
color: #28a745;
font-size: 0.7em;
position: absolute;
left: 2px;
top: 2px;
}
这样改颜色只需调 color，缩放只需改 font-size，加动画也直接用 transition: transform .2s。如果硬塞 SVG，每次换色都要编码替换 %23fff，维护成本高得多。唯一例外是需要复杂矢量图形（比如带阴影的勾），才考虑 SVG。
custom-control-inline 错位时，别只盯着 display
这个类只设了 display: inline-flex，但没重置 margin 和 vertical-align。结果就是多个复选框挤在一起、文字基线错乱、甚至换行异常。解决办法不是删掉它，而是叠加修正：
- 统一加
margin-right: 1rem控制间距 - 强制
vertical-align: middle对齐文字 - 如果父容器有
font-size: 0（常见于 flex 布局清空间隙），记得在label上重设font-size
更稳妥的做法是放弃 custom-control-inline，直接用 display: flex + gap 控制布局，兼容性更好，控制粒度更细。
