美化原生 radio 需隐藏原生控件并用伪元素模拟：1. 用 position: absolute + opacity: 0 隐藏 input，保留可访问性；2. label 用 ::before 绘外圈、::after 绘内点，:checked 触发缩放与颜色动画；3. 保持键盘聚焦与屏幕阅读器支持；4. 示例含平滑 transition 动效。
直接美化原生 input[type="radio] 很难，因为浏览器对它的样式控制极弱。真正可行的方式是「隐藏原生单选框 + 用伪元素或自定义元素模拟视觉效果」，再通过 CSS 实现平滑的选中动画（比如缩放、颜色渐变、环形填充等）。
1. 隐藏原生 radio，用 label 关联控制
这是基础前提：把原生 radio 用 CSS 彻底隐藏，但保留其功能；所有视觉和交互都落在关联的 label 上。
- 给
input[type="radio"]设置position: absolute; opacity: 0; width: 0; height: 0;（不推荐仅用display: none或visibility: hidden，否则会失去可访问性和键盘操作能力） - 确保每个
input有唯一id，对应label的for属性，或把input包在label内
2. 用 ::before / ::after 绘制自定义圆圈 + 动画
在 label 上用伪元素画出“外圈”和“内点”，再借助 :checked 状态触发动画。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 给
label::before设为外圆轮廓（border + border-radius），label::after设为内点（背景色 + transform 缩放） - 对
input:checked + label::after设置transform: scale(1); opacity: 1;，并添加transition: all 0.25s ease - 若想实现“环形填充”效果，可用
conic-gradient配合background动画，或用 SVG mask + CSS 自定义属性驱动
3. 支持键盘操作与无障碍（别漏掉！）
美化后仍要让 Tab 键能聚焦、空格键能切换，且屏幕阅读器能正确识别状态。
- 保持
input在 DOM 中可见（只是视觉隐藏），它天然支持键盘交互 - 为
label添加tabindex="0"不必要，反而可能破坏语义；正确做法是确保input可聚焦（默认即可） - 可通过
aria-checked和role="radio"增强语义（现代浏览器通常自动处理，但复杂场景建议显式补充）
4. 推荐一个轻量动效示例（缩放+颜色过渡）
以下代码片段可直接复用，支持点击/空格切换，动画顺滑：
input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
label {
position: relative;
padding-left: 32px;
cursor: pointer;
}
label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 2px solid #999;
border-radius: 50%;
transition: all 0.2s ease;
}
label::after {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%) scale(0);
width: 10px;
height: 10px;
background: #007bff;
border-radius: 50%;
transition: transform 0.25s ease, opacity 0.15s ease;
}
input:checked + label::before {
border-color: #007bff;
}
input:checked + label::after {
transform: translateY(-50%) scale(1);
opacity: 1;
}
