Bootstrap 5 默认 checkbox 样式不生效，需包裹在 form-check 容器中；id 与 for 必须匹配；禁用 display: none；优先使用内置变体如 form-check-primary；自定义时用 appearance: none + label::before 模拟，并确保可访问性与表单提交正常。
Bootstrap 5 默认 checkbox 样式不生效？先确认是否漏掉 form-check
Bootstrap 5 的复选框必须包裹在 form-check 容器里，否则 form-check-input 和 form-check-label 的样式完全不会触发。常见错误是直接写 <input type="checkbox">，没套 div —— 这时你改再多 CSS 都白搭。
正确结构是：
<div class="form-check"> <input class="form-check-input" type="checkbox" id="agree"> <label class="form-check-label" for="agree">我已阅读并同意</label> </div>
-
form-check是布局和间距的根基，缺它就失去垂直对齐、内边距、响应式缩放 -
id和for必须严格匹配，否则点击 label 无法聚焦或切换 checkbox - 不要给
form-check-input单独加display: none或opacity: 0—— Bootstrap 依赖它原生行为来联动状态
想自定义颜色/大小？优先用 Bootstrap 内置变体，别硬覆盖 form-check-input::after
Bootstrap 5 提供了 form-check-primary 到 form-check-danger 等语义类，也支持 form-switch 切换风格。这些是官方支持、响应式友好的路径。
例如深色主题下用蓝色勾选：
<div class="form-check form-check-primary"> <input class="form-check-input" type="checkbox" id="notify"> <label class="form-check-label" for="notify">开启通知</label> </div>
- 颜色类（如
form-check-success）只影响勾选后的图标色和 hover/focus 边框，不影响未选中态 - 要改尺寸，用
form-check-lg（大号）或配合fs-5调整 label 字体，别直接调width/height—— 否则破坏与 label 的 baseline 对齐 - 强行重写
.form-check-input::after会干扰 Bootstrap 的状态动画（比如 transition 效果），且在 Safari 下易出现渲染错位
需要完全自定义外观（如圆角图标、背景图）？用 appearance: none + 手动模拟状态
当内置样式完全不够用，就得“清空原生样式，自己画”。核心是：保留原生 <input> 的功能（可聚焦、可 tab 导航、表单提交能取值），但视觉上彻底替换。
关键三步：
- 给
form-check-input加appearance: none，并设透明度为 0（不是display: none） - 用
form-check-label::before绘制自定义方框（或圆圈），用form-check-input:checked + label::before控制选中态 - 务必补上
form-check-input:focus + label::before的 outline 样式，否则无障碍访问失败
最小可用示例（圆角复选框）：
.form-check-input {
appearance: none;
opacity: 0;
}
.form-check-label::before {
content: "";
display: inline-block;
width: 1.2em;
height: 1.2em;
border: 2px solid #adb5bd;
border-radius: 4px;
margin-right: 0.5em;
vertical-align: -0.25em;
}
.form-check-input:checked + .form-check-label::before {
background-color: #0d6efd;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3m0 0l3-3m-3 3V6'/%3e%3c/svg%3e");
}
.form-check-input:focus + .form-check-label::before {
box-shadow: 0 0 0 0.25rem rgba(13,110,237,.25);
}
移动端点击区域太小？别只加 padding，要扩 label 的 cursor 和可点击范围
用户点不中 checkbox，90% 是因为 label 没包住整个可操作区，或者没设 cursor: pointer。原生 checkbox 的点击热区默认只有几像素宽。
- 确保
form-check-label的padding-left足够（至少 1.5em），让文字离自定义方框有呼吸感 - 给
form-check-label加cursor: pointer，否则用户看不出能点 - 如果用了绝对定位自定义图标，记得把
form-check-label设为position: relative，避免图标脱离文档流后热区错位 - 真机测试时重点看 iOS Safari —— 它对
label的事件捕获更敏感，for属性失效时点击完全无响应
FormData 是否还能正确读取该 checkbox 的 checked 值。只要没动 name、没删 input 元素、没用 JS 拦截 submit，它就一定在。 
