:checked 伪类用于监听单选框状态变化，需将 input 置于自定义元素前，用 + 或 ~ 选择器控制后续元素样式；禁用 display: none，推荐 position: absolute; opacity: 0; pointer-events: none；结构必须严格满足兄弟关系或包裹于 label 中，且 name 一致以保障单选互斥。
如何用 :checked 隐藏原生单选框并绑定自定义样式
直接隐藏 本身，再用相邻兄弟选择器（+）或通用兄弟选择器（~）控制紧随其后的自定义元素（如 或 ）的显示状态。关键不是“切换”，而是“响应状态变化”——:checked 是只读状态伪类，不能触发，只能监听。
- 必须把
放在自定义容器（如）内部，或确保它在 DOM 中位于自定义元素之前 - 原生控件不能用
display: none隐藏（部分浏览器会禁用交互），推荐用position: absolute; opacity: 0; pointer-events: none; -
的for属性或包裹结构必须正确关联，否则点击自定义区域无法触发:checked
为什么 input[type="radio"]:checked + .custom-radio 不生效
常见失效原因是 HTML 结构不满足“相邻兄弟”要求：选择器中的 + 要求 .custom-radio 元素**紧接在 input 后面**，中间不能有换行文本节点、注释或其他标签。哪怕只是多一个空格，在某些解析模式下也可能破坏匹配。
- 安全写法是把
input和自定义元素写在同一行，且无任何非标签内容间隔 - 更健壮的替代是使用
input[type="radio"]:checked ~ .custom-radio（通用兄弟），但需确保目标元素在同级且位于input之后 - 若结构受限（如框架生成 HTML），改用
包裹input和自定义元素，然后用input:checked + label .custom-radio或结合:has()（注意兼容性）
自定义圆点动画和选中态颜色怎么同步更新
圆点缩放、背景色、边框色等视觉反馈，要全部基于 input:checked 的父级或兄弟元素状态来设置，不能依赖 JS。动画建议用 transform 和 background-color 的 CSS 过渡，避免触发布局重排。
- 例如：
.custom-radio::before { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #ccc; transition: all 0.2s ease; } - 再写：
input:checked + .custom-radio::before { background: #007bff; transform: scale(1.2); } - 注意：不要对
opacity做过渡（闪烁风险），优先用transform和background-color - 深色模式适配可叠加
@media (prefers-color-scheme: dark)重置颜色值
移动端点击无响应或延迟的典型原因
不是伪类问题，而是原生 input 失去焦点能力或被误判为非可点击区域。iOS Safari 对 pointer-events: none 的处理尤其敏感，且部分安卓 WebView 会忽略无 tabindex 的自定义元素的点击穿透。
- 确保
input仍有默认 focus 样式逻辑（即使不可见），可加outline: none但别移除所有 focus 状态支持 - 给自定义元素（如
.custom-radio）显式设cursor: pointer和-webkit-tap-highlight-color: transparent - 避免在
label上同时设onclick和原生关联，会导致重复触发或冲突 - 真机调试时用 Safari 开发者工具检查
:checked是否真实切换——有时表单重置或 Vue/React 的受控组件逻辑会覆盖 DOM 状态
实际最易被忽略的是：自定义样式元素必须和 input 在同一表单上下文中，且 name 属性一致才能保证单选互斥；否则看似能点，实则多个同时选中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
