bootstrap 5 的 checkbox/radio 需配合 form-check 容器、form-check-input 和 form-check-label 才生效；纯 css 自定义需用 appearance: none + 伪元素+兄弟选择器；图标应显式使用 标签而非 content 插入；框架中须确保真实 checked 属性同步更新。
为什么原生 bootstrap 的 checkbox/radio 看起来没反应？
Bootstrap 5 默认不自动美化 input[type="checkbox"] 和 input[type="radio"]，它只提供基础样式类（如 form-check），但视觉效果仍依赖浏览器原生渲染。如果你加了 class="form-check-input" 却没变化，大概率是漏了配套的包裹结构或 CSS 类。
- 必须用
form-check容器包裹整个控件组 -
form-check-input只作用于input元素本身，不负责外观重绘 -
form-check-label是必需的，否则点击 label 无法触发 input 切换 - 如果用了自定义 CSS 或第三方插件（比如 Bootstrap Icons 或 custom-file），可能意外覆盖了默认行为
正确最小结构：
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"><label class="form-check-label" for="flexCheckDefault">默认选项</label> </div>
怎么用纯 CSS 实现无 JS 的自定义样式？
Bootstrap 5 推荐用伪元素 + appearance: none 隐藏原生控件，再用 ::before/::after 绘制新图标。关键点在于：不能直接改 input 的背景或边框，得靠兄弟选择器控制 label 上的伪元素。
- 必须把
input设为position: absolute; opacity: 0（不可用display: none，否则失去可访问性） -
label要设position: relative，才能让伪元素准确定位 - 用
input:checked + label::before控制选中态，不是input:checked::before（input 不支持 ::before） - 图标推荐用 Unicode 字符（✔️、●）或 SVG base64，避免额外请求
示例：圆角复选框
.form-check-input:checked + .form-check-label::after {
content: "✓";
position: absolute;
left: 2px;
top: 2px;
font-size: 12px;
color: #fff;
}
用 Bootstrap Icons 替换原生图标要注意什么？
bootstrap-icons 提供 bi-check、bi-circle-fill 等类，但直接塞进 ::before 会失效——因为图标类依赖 <i></i> 标签和字体加载逻辑。
- 不要写
content: "\f123"手动插入 Unicode，容易和字体文件版本不匹配 - 正确做法：在
label内显式加<i class="bi bi-check"></i>，再用 CSS 控制显隐 - 必须配合
pointer-events: none在图标上，否则会拦截 label 点击事件 - 如果用 Sass，建议通过
$enable-negative-margins: true配合me-n1类微调图标位置
常见错误现象：label 点击无响应、图标错位、检查框变双层
Vue/React 项目里动态绑定 v-model 或 checked 时样式不更新？
框架接管了表单状态，但不会自动触发 CSS 的 :checked 伪类重绘——尤其是当用 v-bind:class 动态切换单独的“已选中”类时，容易绕过原生 checked 属性。
- 始终确保
input元素真实拥有checked属性（Vue 用:checked.sync或v-model，React 用checked={value}） - 不要用
class="checked"模拟状态，CSS 无法识别这个类名是否对应真实选中态 - 如果用封装组件（如
BsCheckbox），确认它内部没有用div代替input——那样就彻底脱离了表单语义链
最容易被忽略的一点：无障碍属性 aria-checked 必须和真实 checked 同步，否则屏幕阅读器会读错状态。
