直接修改 input[type="checkbox"] 样式行不通，因浏览器强制限制其渲染，background、border、width 等属性大多被忽略；可靠方案是隐藏原生控件（position: absolute; opacity: 0），用 label::before/::after 伪元素模拟图标，并通过 :checked 状态联动切换。
为什么直接改 input[type="checkbox"] 样式行不通
因为浏览器对原生 input[type="checkbox"] 的渲染控制极强，background、border、width 等样式大多被忽略，强行覆盖容易失效或在 Safari/Edge 中表现不一致。Bootstrap 5 默认也不提供开箱即用的图标复选框，得靠“视觉隐藏 + 伪元素替代”来实现。
用 ::before 和 ::after 模拟图标的关键步骤
核心思路是：保留原生 input 用于表单提交和可访问性，用其相邻的 label 包裹它，并通过 label::before 绘制未选中状态（如空心方框），再用 input:checked + label::before 切换为选中图标（如 ✔ 或 ✅）。
- 必须给
input加position: absolute; opacity: 0;（不能用display: none，否则会丢失焦点和屏幕阅读器支持） -
label需设position: relative;，才能让伪元素准确定位 - 图标推荐用 Unicode 字符（轻量、无需额外字体）或 SVG base64（可控性强），避免引入 Font Awesome 等整套图标库增加体积
- Bootstrap 5 的
.form-check结构里，input和label是兄弟节点，所以要用input + label::before而非label > input::before
.form-check-input {
position: absolute;
opacity: 0;
z-index: -1;
}
.form-check-input + .form-check-label::before {
content: "□";
display: inline-block;
width: 1.25em;
height: 1.25em;
margin-right: 0.5em;
vertical-align: -0.25em;
font-size: 1.25em;
line-height: 1;
}
.form-check-input:checked + .form-check-label::before {
content: "✔";
}
兼容性与可访问性容易踩的坑
很多自定义方案在键盘导航（Tab → Space）或屏幕阅读器下失效，根源常出在两个地方：
- 没给
label加tabindex="0"且没监听keydown事件模拟点击——其实不用这么复杂，只要确保input仍可聚焦（即没加tabindex="-1"或disabled），Space 键就能正常触发勾选 - 用纯 CSS 实现时，
content中的 Unicode 图标在 Windows 上可能字体 fallback 不一致，导致 ✔ 显示为方块；稳妥做法是用 SVG：content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230d6efd' d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E"); - 如果项目用了 Bootstrap 的 JavaScript 插件（如
Form表单验证），别忘了自定义 checkbox 仍要保留name和value，否则提交时字段会丢失
要不要用 Bootstrap 5 的 form-check-input 类？
要，但只用它做结构基础，别指望它自带图标替换逻辑。它的作用是统一 margin、padding 和基础布局，让你的自定义样式能对齐默认控件高度和垂直居中。真正替换图标的 CSS 必须自己写，且建议放在 Bootstrap CSS 之后加载，避免被重置。
立即学习“前端免费学习笔记（深入）”；
最麻烦的其实是禁用态（:disabled）的图标灰度处理——filter: grayscale(1) opacity(0.6) 在部分旧版 Edge 下不生效，更稳的方式是单独定义 input:disabled + label::before { opacity: 0.4; } 并配一个灰色 Unicode 或 SVG。
