直接修改 radio 和 checkbox 样式不生效，因 uni-app 将其编译为平台原生组件（如微信小程序的 ），内部结构不可访问，scoped 样式失效；H5 下虽生成 ，但受浏览器默认样式限制，且新版 uni-ui 已移除 .uni-radio__icon 等可穿透类名。
uni-app 中直接修改 radio 和 checkbox 的样式，不能靠写普通 CSS 类名覆盖——因为它们在小程序平台被编译为原生组件（如微信小程序的 <checkbox></checkbox> 标签），其内部结构不可访问，scoped 样式完全失效；在 H5 平台虽可操作 DOM，但默认样式由浏览器控制，appearance: none 等基础方案也存在兼容性风险。
为什么直接写 .uni-radio__icon { color: red } 不生效
uni-app 的 uni-radio 和 uni-checkbox 组件本身不渲染可见的 DOM 节点来承载图标，而是调用平台原生控件：
• 微信小程序中实际是 <checkbox></checkbox> 或 <radio-group></radio-group> 原生标签，样式由小程序框架接管；
• H5 下虽会生成 <input type="checkbox">，但该元素默认不可直接设宽高、背景色等；
• 所有你写的 .uni-radio__icon 这类类名，只存在于组件文档示例或旧版 DOM 结构中，新版 uni-ui（v1.4+）已移除这类可穿透的内部类，改用 platform-native rendering。
正确做法：用 color 属性控制主题色，而非覆盖 CSS
官方明确支持通过 color 属性统一控制选中态颜色，这是跨平台最稳定的方式：
-
color仅影响「选中状态」的图标颜色（未选中态仍为平台默认灰） - 微信小程序下生效为 checkbox/radio 的 activeColor；H5 下通过伪元素模拟实现
- 不支持设置大小、图标形状、未选中边框色等细节——这些属于平台限制，无法绕过
示例：
<uni-checkbox v-model="checked" color="#ff4757" /> <uni-radio v-model="selected" color="#2080ff" />
真要自定义图标？必须放弃原生组件，手写 HTML + JS 模拟
如果你需要圆角方框、自定义 SVG 图标、禁用态样式、甚至带动画的切换效果，就得彻底不用 uni-checkbox/uni-radio，改用纯 Vue 模拟：
- 用
<view></view>+<text></text>或<image></image>渲染图标容器 - 用
v-model或@change手动同步状态 - 通过
class切换控制「选中/未选中」视觉态（比如加checked类） - H5 可用
input[type="checkbox"]配合label+appearance: none，但小程序平台必须用 view 模拟
关键注意点：
- 小程序里无法监听原生
checkbox的点击冒泡，所以不要试图给原生标签加 class 或事件 - 手写组件需自行处理 focus 状态、键盘导航（无障碍）、disabled 逻辑
- 若项目已用 uView Plus 或 taro-ui 等第三方库，优先查其是否提供
custom-icon插槽支持
uni.scss 主题变量对 radio/checkbox 无效
很多人误以为修改 $uni-primary 就能改变 uni-checkbox 默认色——其实不会。该变量只影响 uni-button、uni-tag 等纯 View 组件，而 uni-checkbox 在编译时被映射为平台原生控件，不读取 SCSS 主题变量。你改了 $uni-primary，只会让按钮变蓝，checkbox 依然绿（微信）或蓝（H5）。
真正影响它的只有两个东西：一是组件上显式写的 color 属性值，二是平台自身的默认 fallback（如微信小程序未设 color 时固定为绿色）。
