直接改 .form-check-input 的 background 或 border 没反应，因为 bootstrap 5 将其设为 position: absolute; opacity: 0，仅作交互触发器，视觉由 .form-check-label::before/::after 伪元素渲染。
直接改 .form-check-input 的 background 或 border 为什么没反应
因为 Bootstrap 5 把 .form-check-input 设为 position: absolute; opacity: 0，它只是个“透明触发器”，不参与渲染。你看到的圆圈或方框，其实是 .form-check-label::before 和 .form-check-label::after 画出来的。改 input 自身样式等于给隐身人涂指甲油——完全不可见。
- 常见错误：写了
background-color: #0d6efd却毫无变化 - 写了
border-radius: 50%但单选框还是方角 - 禁用态下 label 文字变灰，但伪元素图标依然亮着
appearance: none 写了却无效的真正原因
不是属性写错，而是浏览器兼容性断层。Safari 15.4 之前对 radio 的 appearance: none 支持不全；Firefox 84 及以下即使加了前缀，原生控件仍可能“透出”。必须三管齐下：
-
-webkit-appearance: none（Chrome / Safari 必备） -
-moz-appearance: none（Firefox 必备） -
appearance: none（现代标准） - 再补
opacity: 0+position: absolute+clip: rect(0 0 0 0)防旧版 Firefox 透出 - 加
pointer-events: none，避免 input 遮挡 label 点击热区
如何用兄弟选择器响应 :checked 和 :disabled
伪元素本身不继承状态，:checked 和 :disabled 必须从 input 出发，通过相邻选择器传递过去。关键写法是：input:checked + .form-check-label::after，不是 input:checked::after（input 不支持伪元素）。
-
.form-check-input:checked + .form-check-label::before控制外圈（比如边框颜色、背景色） -
.form-check-input:checked + .form-check-label::after控制内点或勾（比如实心圆、✓ 字符） -
.form-check-input:disabled + .form-check-label处理文字灰度 -
.form-check-input:disabled + .form-check-label::before必须单独设背景/边框色，否则视觉割裂
暗色模式和可访问性容易被跳过的细节
Tailwind 的 dark: 前缀对伪元素无效，::before 里的颜色不能靠类名自动切换。必须手动用媒体查询或 CSS 变量控制：
- 用
@media (prefers-color-scheme: dark)重写伪元素颜色 - 或定义
--radio-bg: #0d6efd，在暗色模式下重设变量值 - 焦点 outline 要适配深色背景，
focus:ring-blue-500在黑底上几乎看不见 - 禁用时，label 和伪元素必须同步灰掉，否则屏幕阅读器用户会困惑
- 键盘 Tab 焦点必须可见，且不能仅靠 outline —— 很多团队只测鼠标，漏掉键盘流
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
