uni-app 中 radio 样式改不动，因H5端依赖原生input且浏览器控制默认样式，小程序端则屏蔽底层节点；需H5用appearance:none+伪元素模拟，小程序改用view手动实现，或统一使用u-radio组件。

uni-app 中 radio 样式为什么改不动？

因为 uni-app 的 radio 组件在不同端渲染机制不同：H5 端基于原生 ，默认样式由浏览器控制，直接写 CSS 无效；小程序端（如微信）则用自定义节点模拟，但官方封装层屏蔽了底层节点暴露。所以「改颜色」「调大小」不能靠改 class 或全局 CSS。

怎么让 H5 端 radio 改变颜色和尺寸？

必须用 CSS 隐藏原生控件，再用伪元素模拟。关键点是：不能只改 radio，得套一层容器，再对 input[type="radio"] 做 appearance: none 处理。

• 给 radio 外层加唯一 class，比如 custom-radio
• 在 H5 条件编译下写 CSS：

  @supports (appearance: none) {
    .custom-radio input[type="radio"] {
      appearance: none;
      width: 20px;
      height: 20px;
      border: 2px solid #999;
      border-radius: 50%;
      outline: none;
    }
    .custom-radio input[type="radio"]:checked::after {
      content: "";
      display: block;
      width: 10px;
      height: 10px;
      background: #4cd964;
      border-radius: 50%;
      margin: 4px;
    }
  }

• 注意：iOS Safari 对 appearance 支持不稳定，建议加 -webkit-appearance: none
• 别用 transform: scale() 改大小——会连带影响点击热区，导致误触

小程序端如何统一控制 radio 样式？

小程序不支持伪元素操作原生组件，必须放弃 ，改用 + 手动实现逻辑，并绑定 v-model 或 @change。

• 用 radio-group 包裹自定义项，但内部不用 radio，而是
• 通过 :class 动态切换选中态样式，比如 radio-item--checked
• 颜色/大小直接写在 class 里，无兼容问题；但需手动维护 checked 状态和 value 同步
• 别漏掉 aria-checked 和 role="radio"——否则无障碍访问失效

跨端一致的最小改动方案

最省事又可控的方式：全局禁用原生 radio，统一用 uView 或 uni-ui 的 u-radio。它内部已处理多端差异，只暴露 active-color、icon-size 等参数。

• 安装后直接用：

  <u-radio v-model="value" :icon-size="20" active-color="#ff9900">选项</u-radio>

• 注意：它的 active-color 在 H5 是改伪元素背景，在小程序是改 icon 颜色，行为一致但原理不同
• 如果项目已用大量原生 radio，别硬改——容易引发 H5 和小程序表现不一致，尤其是 disabled 态或 focus 框

实际改的时候，最容易被忽略的是 disabled 态的视觉反馈和键盘可访问性。很多自定义方案只顾着好看，一按空格键就失灵，或者灰掉后颜色没变，用户根本不知道当前不可操作。