直接设置 width/height 对 checkbox 无效，因其为替换元素，浏览器 ua 样式强制约束渲染；bootstrap 5 需调整 ::before 和 ::after 伪元素尺寸与位置，并统一 box-sizing: border-box。
为什么直接设置 width/height 对 checkbox 无效
因为原生 input[type="checkbox"] 是替换元素（replaced element），浏览器 UA stylesheet 强制约束其渲染，忽略你写的 width: 16px 或 height: 16px —— Chrome、Firefox、Safari 全部如此。这不是 bug，是规范行为。你看到的尺寸其实是 UA 默认绘制的伪图形，不是真实盒模型可控制的内容区。
Bootstrap 5 中改大小必须动 ::before 和 ::after
Bootstrap 5 把原生 checkbox 用 opacity: 0 隐藏，靠兄弟伪元素模拟外观：::before 绘制未选中框，::after 绘制对勾。所以真正要调尺寸的地方是这两个伪元素：
-
::before的width/height控制外框大小，同时必须同步调整top/left补偿 border 偏移（比如border: 2px就得top: -0.125rem） -
::after的对勾是用border+transform画出来的，缩放时不能只改width/height，还得同比例调border-width和transform: translate()偏移量，否则对勾会偏出框外 - 漏掉任一伪元素的尺寸/位置同步，就会出现错位、裁剪、热区不匹配
transform: scale() 看似简单，实际埋雷
用 transform: scale(0.8) 虽能快速缩放视觉，但有三个硬伤：
- 缩放后像素失真，尤其在高 DPI 屏幕上明显模糊
- 点击热区（hit area）不会随缩放变化，仍按原始尺寸响应，导致“点不中”
- 与父容器的
line-height、vertical-align计算脱节，容易和文字基线错位
全局 box-sizing: border-box 对 checkbox 本身没用，但影响包裹它的结构
input[type="checkbox"] 不继承 box-sizing，所以给它加 box-sizing: border-box 没效果。但它外面的 .form-check 容器、label、甚至整个表单行，都依赖盒模型一致才能对齐。如果这些容器还在用 content-box，哪怕 checkbox 样式调对了，也会因 padding/border 撑开而和旁边 input 错位。
最容易被忽略的是：伪元素的 border 和 padding 计算也受父级盒模型影响，所以统一重置 * { box-sizing: border-box; } 是前提，不是可选项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
