单选框默认样式无法直接修改，需用 appearance: none 或 display: none 隐藏原生控件，再通过 :checked + label 结合 ::before 伪元素实现自定义视觉；结构必须为 input 紧邻 label 且在前，否则伪类失效；需兼顾可访问性，保留 focus 样式、语义化文本和 pointer 光标。
单选框默认样式无法直接修改，必须隐藏原生 <input type="radio">
浏览器对 input[type="radio"] 的原生控件有强约束，background、border-radius、width 等样式几乎无效。强行设置只会部分生效或完全忽略。真正可行的路径是：用 appearance: none 或 opacity: 0 隐藏原生元素，再用相邻兄弟选择器（+）或通用兄弟选择器（~）配合 :checked 控制自定义视觉层。
用 :checked + label 实现点击响应与状态同步
关键在于结构必须保证 input 和 label 的顺序与关系正确——input 必须在 label 前，且紧邻（用 +），否则伪类无法触发。常见错误是把 label 放前面，或中间插入了其他元素。
input[type="radio"] {
display: none; /* 彻底隐藏，比 opacity: 0 更稳妥 */
}
<p>input[type="radio"]:checked + label::before {
content: "●";
color: #4a90e2;
font-size: 18px;
}</p><p>input[type="radio"] + label::before {
content: "○";
color: #ccc;
font-size: 18px;
margin-right: 8px;
}注意：::before 是伪元素，必须配合 content 才能渲染；label 必须显式绑定 for 属性或包裹 input，否则点击无反应。
:checked 伪类不支持父元素选择，别试图写 label:has(input:checked)
目前（截至 Chrome 125 / Firefox 126）:has() 在部分场景仍受限，且旧版浏览器完全不支持。更可靠的做法是保持 input 在前、label 在后的线性结构，并用 + 关联。如果 DOM 结构无法调整（比如框架生成的 HTML），可改用 JavaScript 监听 change 事件，动态添加 data-checked 类到父容器：
立即学习“前端免费学习笔记（深入）”；
<div class="radio-group">
<input type="radio" name="theme" id="light" value="light">
<label for="light">浅色主题</label>
</div>
<p>.radio-group input:checked + label {
color: #4a90e2;
font-weight: 600;
}这种写法依赖结构，但零 JS、兼容性好（IE9+）。若需更灵活的布局控制，建议用 position: absolute 将原生 input 移出可视区，再用 label 全权承担交互与视觉。
圆点大小、颜色、动画要兼顾可访问性
自定义后容易忽略焦点态和屏幕阅读器支持。必须保留 :focus-visible 样式，并确保 label 包含可读文本（不能只靠图标）。不要仅靠颜色区分状态，比如红色/绿色圆点对色觉障碍用户不友好。
-
input[type="radio"]:focus + label::before应添加清晰的轮廓（如outline: 2px solid #007aff） - 禁用
user-select: none在label上，否则会影响辅助技术选中 - 过渡动画用
transition: transform 0.2s, color 0.2s比纯opacity更易感知
最常被跳过的一步：没给 label 设置 cursor: pointer，导致用户看不出可点击。
