直接改 radio 的 appearance 不生效是因为其非容器特性导致伪元素无法挂载，正确做法是用 :checked + label::before 在相邻 label 上绘制自定义圆点，并隐藏原 input。
为什么直接改 input[type="radio"] 的 appearance 不生效
因为浏览器对原生 input[type="radio"] 的样式控制极强，appearance: none 虽能隐藏默认圆点，但后续的 ::before 或 ::after 无法直接附加到 input 上——它不是可渲染伪元素的容器。你看到的“没反应”，其实是伪元素根本没挂载成功。
正确做法是把视觉层移到其后的 label 上，并用 input:checked + label::before（或相邻兄弟选择器）触发状态变化。
- 必须确保
input和label是相邻兄弟关系，且input在前 -
label需设position: relative，才能让::before相对定位 -
input本身要设opacity: 0或position: absolute; left: -9999px，既保留可访问性又彻底隐藏
怎么用 :checked + label::before 替换圆点
核心逻辑是：利用 input:checked 状态，通过相邻选择器影响后面 label 的伪元素，再用 ::before 绘制自定义圆点。
<input type="radio" name="theme" id="theme-dark"> <label for="theme-dark">深色模式</label>
对应 CSS：
立即学习“前端免费学习笔记（深入）”；
input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
input[type="radio"] + label {
position: relative;
padding-left: 28px;
cursor: pointer;
}
input[type="radio"] + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 2px solid #999;
border-radius: 50%;
}
input[type="radio"]:checked + label::before {
background-color: #007bff;
border-color: #007bff;
}
-
transform: translateY(-50%)比固定top: Xpx更可靠，适配不同行高 - 如果需要内圈实心圆，可在
:checked状态下额外加一个::after，或用box-shadow: inset - 别忘了给
label加user-select: none，防止双击选中文本干扰点击
兼容性与可访问性容易被忽略的点
IE11 不支持 :checked + label::before 中的 ::before 在 label 上生效（部分版本会渲染但不响应状态），Firefox 对 pointer-events: none 在 input 上的支持也略保守。
- 强制用
for属性绑定label和input的id，否则键盘Tab+Space无法触发选中 - 不要只靠颜色区分选中态，加个
border: 2px solid #007bff或box-shadow提升对比度 - 若项目需支持 IE，改用
input[type="radio"] + label span.radio-fake结构，用 JS 切换 class -
aria-checked="true/false"不必手动加——原生input已自带语义，加了反而可能干扰屏幕阅读器
想加动画？别直接对 background-color 做 transition
圆点从空心变实心，本质是两个视觉层叠加变化，单纯 transition: background-color 会显得突兀。更自然的做法是控制缩放和透明度。
input[type="radio"] + label::before {
transition: transform 0.2s ease, background-color 0.2s ease;
}
input[type="radio"]:checked + label::before {
transform: scale(1.1);
background-color: #007bff;
}
- 避免对
content或display做过渡——它们不支持动画 - 如果用了
::after表示内圆，记得给它单独设transition: opacity，初始opacity: 0，选中时opacity: 1 - 动画时间建议 ≤ 0.25s，过长会让交互反馈滞后
input 的 name 属性写一致，导致多个单选框无法互斥；还有人把 label 写在 input 前面，让 + 选择器完全失效。这些细节比样式本身更容易卡住进度。 
