应放弃uni-radio，改用radio-group包裹label+input[type="radio"]实现自定义样式；微信/支付宝小程序不支持:checked伪类，需用:class动态控制选中态；图标建议用font-icon或SVG并注意对齐与状态切换方式。
uni-app里Radio默认样式无法覆盖怎么办
直接改uni-radio的class或style基本无效——它内部用view和text封装了结构，且关键样式（如圆点、选中态）写在组件源码里，通过外部CSS权重很难穿透。真正可控的方式是放弃uni-radio，手写语义化结构 + 自定义样式 + 手动绑定状态。
用radio-group + label + input type="radio"实现兼容方案
uni-app支持原生input type="radio"，但需注意：H5平台表现一致；小程序平台（微信/支付宝）中input[type="radio"]不渲染可见控件，必须配合label和隐藏input来触发，再用伪元素或图标模拟视觉反馈。
- 把
input设为position: absolute; opacity: 0;，确保可点击但不可见 - 用
label包裹input和自定义内容（文字+图标），点击区域更大更友好 - 通过
:checked + .custom-radio-icon或input:checked ~ .custom-radio-icon控制选中态样式（注意H5支持相邻兄弟选择器，小程序需用label包裹结构保证触发） - 绑定
v-model到父级radio-group的value，每个input的value对应选项值
示例片段：
<radio-group @change="onRadioChange">
<label class="radio-item" v-for="item in options" :key="item.value">
<input type="radio" :name="groupName" :value="item.value" v-model="selectedValue" />
<span class="custom-radio-icon"></span>
<span class="radio-label">{{ item.label }}</span>
</label>
</radio-group>
微信小程序平台下checkbox和radio的伪类限制
微信小程序的WXS不支持:checked伪类，CSS里写input:checked + .icon会失效。必须改用class动态控制：
- 给每个
label加:class="{ 'is-checked': selectedValue === item.value }" - 把选中态样式（如背景色、对勾图标）写在
.is-checked .custom-radio-icon里 - 避免依赖
:checked，否则真机调试时发现样式不动，就是这个原因 - 支付宝小程序同理；H5平台可放心用伪类，但统一写法更省心
图标字体或SVG做自定义Radio图标的注意事项
用font-icon（如iconfont）或内联svg替代原生圆点时，注意尺寸和垂直对齐：
-
font-size设为16px左右，配合line-height: 1和vertical-align: middle对齐文字 - SVG建议用
width="16" height="16"，加fill颜色，并用display: inline-block保持行内布局 - 选中态切换不要用
opacity动画（小程序不支持），改用transform: scale()或color/fill变化更稳妥 - 别忘了给未选中态也定义
fill或color，否则某些平台默认灰得看不清
复杂点在于状态同步和平台差异——样式可以一次写好，但click触发、v-model响应、小程序真机的点击区域判定，每一步都得实测验证。
