自定义表单控件需通过伪元素+相邻选择器绑定状态，补全浏览器前缀、隐藏原生控件、适配暗色模式与禁用态，并确保可访问性。
直接改 .form-check-input 的 border 或 background 没用——它被设为 opacity: 0 且 position: absolute 隐藏了，真正显示的是紧邻 label 的伪元素。
为什么 appearance-none 写了却没生效
不是属性写错了，而是浏览器前缀缺失或结构不匹配。Bootstrap 5+ 默认已加 appearance: none，但 Safari 和旧版 Firefox 仍可能忽略它。
- 必须同时写三套：
-webkit-appearance: none、-moz-appearance: none、appearance: none - Safari 15.4 之前不支持
appearance: none对radio的完整移除，-webkit-appearance: none是刚需 - Firefox 84 及以下即使加了前缀，原生控件仍可能“透出”，得补
opacity: 0+position: absolute+clip: rect(0 0 0 0) - 如果用了第三方 CSS 框架或图标库，可能意外重置了
appearance或覆盖了伪元素定位
怎样让自定义圆点/勾选图标真正响应 :checked 状态
不能只靠修改 input 自身，必须通过伪元素 + 相邻兄弟选择器把视觉和真实状态绑定起来。
- 推荐结构：
<input type="radio" id="opt1"><label for="opt1">选项一</label>，并确保它们同在<div class="form-check"> 内 <li>样式锚点要落在 <code>label上，比如：.form-check-input:checked + .form-check-label::before -
::before画外圈（边框圆），::after画内点（高亮实心），避免用同一伪元素混用两种状态 - 别忘了给
input加pointer-events: none，否则它会遮挡label的点击热区 - 必须用媒体查询手动控制：
@media (prefers-color-scheme: dark) { .form-check-input:checked + .form-check-label::before { background-color: #374151; } } - 或者用 CSS 变量统一管理：
--radio-bg: #0d6efd; --radio-border: #6c757d;，再在dark下重设变量值 - 禁用状态（
:disabled）也要单独处理，否则label文字变灰但伪元素还亮着，视觉割裂 - 焦点 outline 同样要适配暗色模式，
focus:ring-blue-500在深背景上可能不可见，得换为focus:ring-white或带透明度的浅色
暗色模式下伪元素颜色怎么同步切换
Tailwind 的 dark: 前缀对伪元素无效，::before 里的颜色不能直接写 dark:bg-gray-700。
立即学习“前端免费学习笔记（深入）”；
最常被忽略的是可访问性细节：键盘 Tab 切换时焦点看不见、屏幕阅读器读不到状态变化、禁用时 label 和伪元素不同步灰掉——这些不是“锦上添花”，而是自定义控件能上线的前提。
