直接设 width/height 无效，应通过修改 ::before 和 ::after 伪元素控制 checkbox 外框与对勾，并为 label 添加 padding 扩展点击热区，同时排查 overflow、pointer-events、touch-action 等干扰项。
直接设 width/height 无效，别白费力气
在 Chrome、Firefox 和 Safari 中，input[type="checkbox"] 的 width 和 height 属性基本被忽略——这是浏览器 UA stylesheet 强制限制的结果，不是你 CSS 写错了。Bootstrap 5 也延续了这一行为，.form-check-input 类本身没开放尺寸控制入口。强行写 width: 20px; height: 20px; 只会让开发者多一次刷新页面的徒劳。
真正起效的是改 ::before 和 ::after 伪元素
Bootstrap 5 和大多数现代自定义方案都把原生 checkbox 隐藏（opacity: 0 + position: absolute），靠伪元素画框和对勾。所以缩放必须动这两层：
-
::before控制外框：调width、height、border，同时微调top/left补偿边框偏移（比如top: -0.125rem） -
::after控制对勾：它是用border+transform: rotate()绘制的，缩小时要同比例减border-width和transform偏移量 - 别忘了同步调整
margin-top或line-height，否则 checkbox 和 label 文字基线会错位
移动端点击热区仍不够？加 padding 才是正解
即使视觉尺寸变大了，原生点击热区还是很小。iOS 人机指南要求最小可点区域 ≥44px，Android Material 也建议 ≥48dp。这时不能靠 transform: scale()（会模糊、热区错位），也不能只靠伪元素（它不扩展事件区域）：
- 给包裹
input的label加padding: 12px 20px，上下 12px × 2 + 行高 ≈ 44px 总高 - 短文本如“是”“同意”需补
min-width: 44px，否则宽度不足 - 确保
label是块级或 inline-block，且box-sizing: border-box，避免 padding 导致布局撑开 - 真机测试时加
outline: 1px solid red，一眼看出实际响应边界是否被父容器overflow: hidden裁剪，或被上层::before遮罩拦截
容易被忽略的干扰项：热区失效往往不是样式问题
写了 padding 还点不中，大概率是 DOM 层级或触摸行为被锁死：
- 父容器设了
overflow: hidden，把 padding 区域裁掉了 - 上层有透明伪元素（比如遮罩层）但没加
pointer-events: none - 意外写了
touch-action: none，尤其在滚动容器里，直接禁用了所有 touch 事件 -
label嵌在transform定位的父层中，视觉位置和热区坐标错位
这些没法靠 DevTools 看出来，得真机录屏+触摸反馈叠加验证——模拟器永远显示不出真实热区是否被截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
