bootstrap 5 中需通过修改 .form-check-input::before 和 ::after 伪元素的 width/height 等属性来缩放 checkbox，而非直接设置 input 尺寸或使用 transform: scale()；否则会导致错位、失真或点击热区异常。
Bootstrap 5 默认不支持直接设置 input[type="checkbox"] 的 width/height
直接写 width: 20px; height: 20px; 在原生 checkbox 上基本无效——浏览器会忽略，尤其在 Chrome/Firefox 中。这是因为表单控件的渲染受 UA stylesheet 强制约束，且 Bootstrap 5 的 .form-check-input 类本身也未开放尺寸控制接口。
真正起作用的是「用自定义伪元素覆盖默认样式」，而不是调整原生 input 尺寸。
- 原生
input[type="checkbox"]只能通过transform: scale()粗略缩放（但会模糊、失真、影响点击热区） - Bootstrap 5 的
.form-check-input默认用了position: absolute+opacity: 0隐藏原生框，靠兄弟元素.form-check-input::after模拟外观 - 所以改大小，得动的是
::before和::after伪元素的width/height/top/left
覆盖 .form-check-input::before 和 ::after 实现精准缩放
Bootstrap 5 使用伪元素绘制选框背景（未选中）和对勾（选中），它们的尺寸、位置、边框都需同步调整，否则会出现错位或裁剪。
以下 CSS 能把默认约 1.25rem（20px）的选框缩放到 16px，并保持居中、对勾比例协调：
input[type="checkbox"].form-check-input {
margin-top: 0.25rem; /* 微调垂直对齐 */
}
input[type="checkbox"].form-check-input::before {
width: 16px;
height: 16px;
border: 2px solid #6c757d;
top: -0.125rem; /* 补偿 border 导致的偏移 */
left: -0.125rem;
}
input[type="checkbox"].form-check-input::after {
width: 8px;
height: 4px;
border: 2px solid #fff;
border-width: 0 0 2px 2px;
transform: rotate(-45deg) translate(1px, 1px);
}
-
::before控制外框大小和边框；top/left必须随width/height调整，否则脱离 label 文本基线 -
::after的对勾是用 border 绘制的，其width/height是视觉长度，不是实际尺寸；缩小时要同比例减小border-width和transform偏移量 - 如果用了
.form-check-inline，还需额外处理margin-right，避免文字挤在一起
用 transform: scale() 最快但有明显缺陷
适合临时调试或对精度要求不高的场景，比如内部工具页面快速改大一点。但别用在生产环境的表单里。
- scale 后，点击热区不会等比放大，用户容易点不中
- 高分屏下
scale(1.2)可能导致边缘发虚、锯齿 - 与 Bootstrap 的
.form-check-label垂直对齐逻辑冲突，常出现上下偏移 - 示例（不推荐）：
input[type="checkbox"].form-check-input { transform: scale(0.8); margin-top: 0.3rem; }
响应式适配时别只改一个断点的伪元素
如果你在 @media (max-width: 768px) 里缩小了 checkbox，但忘了同步调整 ::after 的 transform 和 border-width，对勾就会错位甚至消失。
- 所有涉及尺寸的声明（
width,height,border-width,top,left,transform）必须成套修改 - 建议抽成 CSS 自定义属性，比如
--check-size: 16px，再用calc()计算偏移，降低维护成本 - 移动端慎用过小尺寸（
改表单控件尺寸本质是绕过浏览器限制做视觉重绘，关键不是“设多少”，而是“哪几个地方必须同步动”。漏掉 ::after 的 transform 偏移，或者没调 ::before 的 top，都会让 checkbox 看起来“怪怪的”——这种细节最容易被忽略，也最难 debug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
