原生 radio 无法直接用 CSS 改颜色或大小，因浏览器限制其外观控制；必须用 appearance: none 隐藏原生样式，再通过伪元素（如 ::before/::after）配合 label 自定义视觉表现，并确保可访问性与交互一致性。
为什么原生 <input type="radio"> 不能直接用 CSS 改颜色或大小
因为浏览器对 <input type="radio"> 的外观控制非常有限：appearance: none 是唯一可靠入口，但必须配合自定义元素（比如 ::before 或伪元素）才能真正替换视觉表现。直接给 input 设置 background-color 或 width 基本无效，尤其在 Safari 和旧版 Edge 上。
常见错误现象包括：样式只在 Chrome 生效、选中状态不响应、焦点 outline 消失后无法键盘导航。
- 必须用
appearance: none清除默认渲染，再用position: relative+::after绘制新圆点 -
input:checked + label或input:checked::after是最稳定的选中状态触发方式，避免依赖 JS - 保留
input:focus-visible样式，否则键盘用户 tab 到单选按钮时会“消失”
用 label 包裹 input 是必须的，不是可选的
没包裹就等于放弃可访问性和点击体验。原生 input 点击区域极小（通常只有 12×12px），用户几乎点不中；而 label 能把整个文字/区域变成可点击区，且 screen reader 会自动关联 for 或嵌套关系。
正确写法只有一种主流模式：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<label> <input type="radio" name="theme" value="dark"> 深色模式 </label>
- 不要用
for+id分离写法，除非 DOM 结构强制要求——多一层 id 维护，易出错 -
label必须紧跟input，否则input:checked + label选择器失效 - 如果 label 文字需要换行或复杂排版，用
display: inline-flex或flex-direction: column控制，别动input的 display
appearance: none 后怎么画一个真正可用的圆点
核心是用伪元素模拟两个同心圆：外圈是未选中状态（border + transparent background），内圈是选中状态（solid background）。关键在于尺寸、定位和过渡。
- 给
input设width: 0; height: 0; opacity: 0，彻底隐藏但保留在 tab 顺序中 - 用
label::before画外圈：content: ""; display: inline-block; width: 18px; height: 18px; border: 2px solid #999; border-radius: 50% - 用
input:checked + label::after画内圈：content: ""; position: absolute; width: 8px; height: 8px; background: #007bff; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) - 加
transition: all 0.15s ease在::before上，让勾选有缓动，别加在::after上——它只出现/消失，不需要过渡
移动端点击区域太小？别只改 font-size
单纯放大文字不会放大点击热区。真正有效的是扩大伪元素尺寸 + 增加 label 内边距，同时保持视觉比例。
- 把
label::before宽高提到24px，并设margin-right: 8px（文字右侧留空） - 给
label加padding: 10px 12px，这样手指点 anywhere in label 都能触发 - 注意
label的line-height和vertical-align，避免多行文字和圆点错位——推荐用display: flex; align-items: center - iOS Safari 对
label的点击延迟敏感，加cursor: pointer和-webkit-tap-highlight-color: transparent可减少反馈延迟
复杂点不在怎么画圆，而在怎么让这个圆始终对齐文字基线、适配不同字号、不破坏表单流式布局——每次改字体或间距都得重新调 top/transform 偏移。
