直接设置input[type="checkbox"]的width/height无效，因Bootstrap 5将其设为opacity:0+position:absolute隐藏，视觉元素由.form-check-input::before和::after伪元素绘制，需同步调整二者width、height及top/left偏移量以确保对齐与比例协调。
直接改 input[type="checkbox"] 的 width 或 height 没用——浏览器会忽略，Bootstrap 5 也根本不响应。真正可控的是 .form-check-label::before 和 ::after 这两个伪元素。
为什么直接设置 input 尺寸无效
Bootstrap 5 把原生 checkbox 设为 opacity: 0 + position: absolute 隐藏了，它不参与视觉渲染。你看到的方框和对勾，全是靠相邻 label 的伪元素画出来的。所以给 input 加 border、background、transform: scale()，要么完全没反应，要么导致点击热区错位、图标模糊、对齐偏移。
- Chrome/Firefox 对原生表单控件有强 UA stylesheet 约束，
width/height属性被强制重置 -
transform: scale()会缩放整个渲染层，包括透明区域，热区仍按原始尺寸响应 - Bootstrap 的
.form-check-input类本身没开放尺寸接口，也没定义box-sizing或appearance
正确覆盖伪元素的写法
必须同时控制 ::before（未选中框）和 ::after（选中图标），并同步调整 top/left 偏移量，否则会脱离文字基线或被裁剪。
-
input[type="checkbox"].form-check-input::before：设width/height控制外框大小，top/left补偿边框带来的偏移（例如top: -0.125rem） -
input[type="checkbox"].form-check-input:checked + .form-check-label::after：用content: "✓"或background-image绘制对勾，font-size或width/height要与::before匹配 - 如果用了
.form-check-inline，还得额外调margin-right，不然文字紧贴图标
自定义的优缺点对比
纯 CSS 自定义不是“更高级”，而是权衡取舍的结果：它绕开了 Bootstrap 的 JS 逻辑和默认渲染链，换来精准控制，但也带来维护成本和兼容性风险。
- 优点：零 JS 依赖、可访问性保留（
opacity: 0不是display: none）、深色模式可手动适配、支持动画过渡（如transform: translateX()） - 缺点：需手动处理所有状态（
:checked、:disabled、:disabled:checked）、移动端点击热区易缩水（得靠label扩展）、伪元素定位受父容器display和position干扰大 - 容易被忽略的点：
input和label必须严格相邻（不能有换行或空格），for/id必须精确匹配，否则:checked + label选择器失效
