bootstrap 5 的 .form-check-input 不能直接用 appearance: none + 背景色搞定，因其虽默认应用 appearance: none，但原生控件仍受浏览器限制，background-color 不生效；必须隐藏 input（opacity: 0; position: absolute），用 label::before/::after 重绘胶囊与圆点，并同步 :checked、:focus、:disabled 等状态以保障可访问性。
为什么 Bootstrap 5 的 .form-check-input 不能直接用 appearance: none + 背景色搞定
因为 Bootstrap 5 默认对 .form-check-input 应用了 appearance: none，但同时保留了原生单选框的尺寸、焦点轮廓和屏幕阅读器行为。直接加 background-color 不生效——它被包裹在伪元素或父容器的层级遮盖了，且默认未清除 border 和 box-shadow，导致胶囊形变或边缘发虚。
真正要替换，得接管整个视觉层：隐藏原生控件 + 用 ::before/::after 重绘胶囊 + 同步状态（:checked、:focus、:disabled）。
- 必须将
.form-check-input设置为opacity: 0; position: absolute;（而非display: none，否则会破坏可访问性） -
.form-check-label需要设position: relative;，才能让伪元素相对它定位 - 胶囊宽度需依赖
padding和min-width控制，不能只靠width—— 否则小文字下会塌缩
如何用伪元素画出带圆角过渡的胶囊背景和选中圆点
核心是用 .form-check-label::before 绘胶囊底图，::after 绘内部圆点；两者都通过 transform: translate() 精确居中，避免因字体渲染差异偏移。
.form-check-input:checked + .form-check-label::after {
transform: translateX(16px) translateY(-50%);
}
.form-check-label::before {
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 48px;
height: 24px;
background: #e9ecef;
border-radius: 999px;
transition: background 0.2s, transform 0.2s;
}
.form-check-label::after {
content: "";
position: absolute;
top: 50%;
left: 4px;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: #0d6efd;
border-radius: 50%;
transition: transform 0.2s;
}
- 胶囊高度设为
24px、圆角用999px（比半高更大即可），确保跨设备圆滑 - 圆点
left: 4px是预留左侧内边距，translateX(16px)是从左边缘到胶囊中心的距离（48/2 - 16/2 = 16） - 务必给
::before和::after都加transition，否则状态切换生硬
怎么兼容 disabled 和 focus 状态，又不破坏语义
Bootstrap 的 .form-check-input:disabled 会透传到父级 .form-check，所以不能只监听 input:disabled，而要靠类名联动：
.form-check-input:disabled + .form-check-label::before {
background: #e9ecef;
opacity: 0.6;
}
.form-check-input:focus + .form-check-label::before {
box-shadow: 0 0 0 0.2rem rgba(13, 110, 237, 0.25);
}
.form-check-input:checked:disabled + .form-check-label::after {
background: #6c757d;
}
-
:focus样式必须加在::before上，否则焦点环会套在不可见的原生 input 上，用户看不到反馈 - 禁用时，圆点颜色要降饱和（用
#6c757d而非纯灰），保持视觉层级清晰 - 不要用
pointer-events: none，否则键盘 Tab 无法聚焦，破坏可访问性链路
为什么把样式写在 <style></style> 标签里比覆盖 Bootstrap SCSS 更稳妥
Bootstrap 5 的 _forms.scss 中，.form-check-input 的 z-index、clip 和 margin 规则容易与自定义伪元素冲突。直接在 HTML <style></style> 或独立 CSS 文件中写，能确保选择器权重足够（比如用 .form-check-input:checked + .form-check-label::after 比 SCSS 编译后的默认规则高）。
- 避免在
node_modules/bootstrap/scss/下改源码——下次npm update就丢失 - 如果项目用 Sass，建议新建
_custom-forms.scss，并在入口文件最后 import，利用后加载优先级 - 测试时重点看 Safari iOS：它的
::after在position: absolute容器中有时渲染错位，加transform: translateZ(0)可强制硬件加速修复
胶囊单选框真正的难点不在画形，而在状态同步粒度——:checked、:focus、:disabled、:hover 四者叠加时，任意两个组合都要有明确视觉反馈，且不能牺牲键盘导航和读屏器播报。漏掉一个，就等于在生产环境埋了个可访问性雷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
