appearance: none无效是因为bootstrap 5已默认设置该属性并隐藏input，真正控制样式的为label的::before/::after伪元素；须通过兄弟选择器配合content、position等重绘方框与对勾。
直接给 input[type="checkbox"] 设置 appearance: none 不能单独生效——Bootstrap 5 已经这么做了，但你改的只是“被隐藏的那层”，真正显示的是 label 的伪元素；不操作 ::before/::after，样式根本不会变。
为什么 appearance: none 没反应？
Bootstrap 5 的 .form-check-input 默认就写了 appearance: none（还加了 opacity: 0 和 position: absolute），所以你再写一遍只是覆盖了个已存在的声明。它起的作用是“让原生控件不渲染”，不是“让你能重画它”。真正控制外观的是紧邻的 label 及其 ::before 和 ::after 伪元素。
-
appearance: none只是起点，不是终点；删掉它反而会让原生方框重新出现，破坏布局 - 浏览器对
input[type="checkbox"]的尺寸、边框、背景等属性有强 UA 样式锁定，width/height/border基本无效 - 如果你用的是 Bootstrap 5.3+，它甚至把勾选图标也抽成了 SVG
background-image，此时连content: "✓"都可能被盖住
怎么安全地用 appearance: none 自定义复选框？
必须配合定位和伪元素重绘，且保留可访问性。核心是：让 input 彻底隐身但可交互，所有视觉交给 label::before（方框）和 input:checked + label::after（对勾）。
- 确保结构是
<div class="form-check"> <input id="x"><label for="x">文字</label> </div>，否则兄弟选择器input:checked + label::after不触发 - 给
label加position: relative，否则::after的top/left会相对整个页面定位 - 别用
display: none隐藏input——这会让屏幕阅读器读不到、键盘Tab跳过、click事件失效；opacity: 0+pointer-events: none是更稳妥的组合 - 如果用了
transform: scale()临时调试，记得同步调大label::before的width/height，否则对勾会错位
常见踩坑：appearance 写对了，但图标还是不显示
现象是方框出来了，但勾选后没对勾。问题几乎都出在伪元素的触发条件或内容上。
-
input:checked + .form-check-label::after中的+是“紧邻兄弟”，如果中间插了空格、注释或文本节点，选择器就断了 -
content用 Unicode 如"\2713"比"✓"更稳，避免字体缺失导致空白 - 忘了给
::after设position: absolute，结果对勾堆在文字开头而不是方框里 -
::before没设display: inline-block或block，width/height直接失效
要不要用自定义 SVG 替代 content？
可以，但只推荐在需要高保真或动态颜色时用。SVG base64 编码后的路径要 URL 编码，比如圆点填色 fill='%230d6efd'；而 viewBox 必须和伪元素的 width/height 匹配，否则缩放失真。日常开发中，content: "\2713" + font-size + color 组合更轻量、兼容性更好，iOS 和旧版 Android 都稳。
最易被忽略的一点：所有伪元素的 top/left 偏移值，必须随 width/height 等比调整。比如把方框从 18px 缩到 14px，top: 2px 就得改成 top: 1.5px，否则对勾会飘出框外——这不是 bug，是定位基准没同步更新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
