用 label + ::before/::after 隐藏原生 radio 并模拟图标，确保可访问性；统一用 inline-flex 对齐图标与文字；监听 change 事件获取状态；扩大 label 点击区域至 44px；提前规范 SVG 图标尺寸与结构。
radio 默认样式太丑，怎么用图标替代原生圆点？
浏览器对 <input type="radio"> 的默认渲染不一致，且无法直接用 CSS 改变圆点形状。真想换图标，得隐藏原生控件，用 label + ::before/::after 模拟视觉效果。
- 必须给
input加position: absolute; opacity: 0;或clip: rect(0 0 0 0);隐藏但保留可访问性 -
label要和input关联（用for属性或包裹结构），否则点击图标不会触发选中 - 图标建议用字体图标（如 Font Awesome）或 SVG 内联，避免额外 HTTP 请求；用背景图的话要注意高 DPI 屏幕缩放问题
- 别忘了加
:focus样式，否则键盘用户 Tab 切换时看不到焦点，不符合无障碍要求
微信/支付宝/银联图标对齐总错位，CSS 怎么调？
图标尺寸、行高、vertical-align、margin 稍有差异就会导致 radio 组内选项上下参差。不是“调一下 margin 就好”，得统一基线锚点。
- 给所有
label设置display: inline-flex; align-items: center;，比用vertical-align: middle更可靠 - 图标容器（比如
<i class="icon-wechat"></i>）设固定宽高和flex-shrink: 0;，防止文字过长挤压图标 - 文字部分用
<span></span>包裹并设margin-left: 8px;（不要用 padding，会影响点击热区） - 测试时在 iOS Safari 和 Android Chrome 下手动缩放页面，看图标是否仍居中——很多“对齐正常”只在桌面 Chrome 里成立
选中状态图标颜色/边框没变化，JS 为什么监听不到？
常见误区是直接监听 click 事件，但 radio 的值变更可能来自键盘（空格键）、脚本赋值或辅助技术。应该监听 change 事件，且确保事件绑定在 input 上而非 label。
- 不要写
label.addEventListener('click', ...)，这会漏掉键盘操作 - 检查是否用了
event.preventDefault()在错误的地方，它会阻止表单控件的默认行为，导致checked状态不更新 - 如果用框架（如 Vue/React），别手动操作
input.checked，优先走响应式数据流；原生 JS 中读取状态一律用input.checked，而不是input.getAttribute('checked') - 多个 radio 共享
name是关键：漏写或拼错name值，会导致“看起来能点，实际互不影响”
移动端点击区域太小，用户老点不中怎么办？
原生 radio 的点击热区只有几像素，手指操作极易失败。这不是加个 padding 就能解决的——padding 加在 input 上无效，加在 label 上又可能破坏布局。
立即学习“前端免费学习笔记（深入）”；
- 给
label设min-height: 44px;（iOS 最小触控建议值），再用display: flex垂直居中内容 - 确保整个
label区域都可点击，不要把图标和文字拆成两个独立可点击块 - 避免在
label上设pointer-events: none;，哪怕是为了透传事件，也会让点击彻底失效 - 真要兼容旧 Android（4.4 及以下），加
cursor: pointer;能小幅提升点击反馈识别率
最麻烦的其实是图标资源的一致性：同一套支付方式，在不同项目里用微信的方形 icon、支付宝的圆形 icon、银联的带字标，视觉就散了。别指望设计师临时补一套，提前约定好 SVG 路径结构和 viewBox 尺寸，比后期调样式省三倍时间。
