隐藏原生单选框应使用 position: absolute; opacity: 0; pointer-events: none，而非 display: none 或 appearance: none；确保 dom 中 input 紧邻 label（无换行/空格），或改用 ~ 选择器；推荐将 input 嵌入 label 内，并用 ::before/::after 实现自定义样式，同步处理 :disabled、:checked 和 :focus 状态。
直接改 input[type="radio"] 的样式基本无效，浏览器对它的 CSS 控制力极弱——width、height、background、border-radius 全部被忽略。真正可行的路径只有一条：隐藏原生控件，用 label 承载视觉，靠 :checked 触发状态切换。
为什么 input:checked + label 有时不生效
核心是 DOM 结构没对齐。这个选择器要求 label 必须**紧挨在 input 后面**，中间不能有文本节点、注释或任何其他元素。哪怕 HTML 里多了一行换行或一个空格，在部分解析环境下都可能让匹配失败。
- ✅ 安全写法：
<input type="radio" id="opt1"><label for="opt1">选项一</label>（同一行，无空格） - ❌ 常见坑：
<input>\n<label></label>或<input><span></span><label></label>—— 都会断掉+关系 - ⚠️ 框架场景（如 React/Vue）动态插入内容时，DOM 顺序可能被破坏，建议改用
input:checked ~ label[for="opt1"]，但需确保label在同级且位于input之后
隐藏原生单选框的正确方式
别用 display: none —— 它会让控件无法聚焦、键盘操作失效，还可能在某些安卓 WebView 中彻底禁用交互。也别依赖 appearance: none，Safari 旧版和部分 WebView 对 radio 的支持不一致。
- 推荐组合：
position: absolute; opacity: 0; pointer-events: none; - 必须保留
tabindex或天然可聚焦性（比如包裹在label内），否则屏幕阅读器和键盘用户会丢失控制权 - 如果结构允许，直接把
input放进label里（<label><input type="radio">文字</label>），能省去for/id绑定，也更健壮
自定义圆点或卡片样式的常见写法
视觉元素通常用 label::before 或 label::after 实现，再通过 :checked 切换状态。注意伪元素定位需要 label 设为 position: relative。
- 基础圆点：
label::before { content: ""; display: inline-block; width: 16px; height: 16px; border: 2px solid #999; border-radius: 50%; margin-right: 8px; } - 选中态：
input:checked + label::before { background: #007bff; border-color: #007bff; } - 禁用态要单独处理：
input:disabled:checked + label::before { background: #ccc; border-color: #ccc; }，否则选中后禁用，圆点会“卡”在高亮状态 - 文字颜色和
cursor: not-allowed也要同步加到input:disabled + label上，否则用户看不出不可操作
最易被忽略的是禁用态和键盘焦点的连贯性——:checked 在 disabled 下不触发，:focus 样式若没配好，Tab 键切换时就只剩一个看不见的焦点框。这些细节不补全，看似能点，实则残缺。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
