修改 uni-ui 多选框 (uni-data-checkbox) 的默认样式

在 uniapp 中使用 uni-ui 的 uni-data-checkbox 组件时，可以通过以下几种方式修改其默认样式：

方法一：使用深度选择器

• 格式一：在页面的 style 部分使用深度选择器 >>> 或 /deep/ 来穿透组件作用域：

  /* 在普通 CSS 中 */
  >>> #rememberbox .uni-checkbox-input {border-color: #ff0000;background-color: #f8f8f8;
  }>>> #rememberbox .uni-checkbox-input.uni-checkbox-input-checked {background-color: #ff0000;border-color: #ff0000;
  }/* 在 SCSS 中 */
  /deep/ #rememberbox {.uni-checkbox-input {width: 20px;height: 20px;border-radius: 50%;}
  }
  

• 格式二 ：使用 ::v-deep（推荐）：在 scoped 样式中，Vue 推荐使用 ::v-deep 替代 >>> 或 /deep/：

  <style scoped>
  /* 使用 ::v-deep */
  ::v-deep #rememberbox .uni-checkbox-input {border-color: red !important;background: #f0f0f0;
  }/* 或者用 :deep()（Vue 3+ 推荐） */
  :deep(#rememberbox) .uni-checkbox-input {border-radius: 50%;
  }
  </style>
  

方法二：使用全局样式

在 App.vue 或公共样式文件中定义全局样式：

.uni-data-checkbox .uni-checkbox-input {/* 你的样式 */
}

方法三：使用自定义类名

给组件添加自定义类名，然后通过该类名修改样式：

<uni-data-checkbox class="custom-checkbox" ...></uni-data-checkbox>

.custom-checkbox .uni-checkbox-input {/* 你的样式 */
}

方法四：修改主题变量（如果支持）

查看 uni-ui 文档，看是否支持通过 CSS 变量修改主题：

:root {--checkbox-color: #ff0000;--checkbox-border-color: #ff0000;
}

完整示例

<template><view><uni-data-checkbox id="rememberbox" multiple v-model="rememberVal" :localdata="rememberObj" @change="onRememberCheckboxChange"class="custom-checkbox"></uni-data-checkbox></view>
</template><style>
/* 方法一：深度选择器 */
>>> #rememberbox .uni-checkbox-input {border-color: #ff0000;width: 20px;height: 20px;
}>>> #rememberbox .uni-checkbox-input.uni-checkbox-input-checked {background-color: #ff0000;border-color: #ff0000;
}/* 方法三：自定义类名 */
.custom-checkbox .uni-checkbox-wrapper {margin-right: 10px;
}.custom-checkbox .uni-checkbox-input {border-radius: 50%;
}
</style>

注意事项

1. 不同版本的 uni-ui 可能有不同的类名结构，建议在浏览器开发者工具中查看实际生成的 DOM 结构和类名
2. 如果样式不生效，尝试添加 !important 或检查选择器是否正确
3. 多选框的样式可能由多个类共同控制，需要检查选中状态、禁用状态等不同情况下的样式

如果以上方法都不适用，建议查阅 uni-ui 的官方文档，查看是否有专门提供的样式修改 API 或插槽(slot)来自定义样式。

---

---

样式覆盖，小程序/安卓/ios兼容问题

在 uniapp 中修改 uni-ui 组件样式时，不同平台（H5、Android、iOS、各小程序）对 CSS 深度选择器的支持情况不同。以下是各平台的兼容性分析和解决方案：

---

1. 各平台对深度选择器的支持情况

方法	H5	微信小程序	支付宝小程序	Android/iOS (App)	说明
>>> / /deep/	✅	❌	❌	❌	仅 H5 支持
::v-deep	✅	❌	❌	✅ (部分版本)	Vue 2/3 推荐，App 端可能生效
:deep() (Vue 3)	✅	❌	❌	✅ (部分版本)	Vue 3 推荐
!important	✅	✅	✅	✅	通用，但可能影响维护
options.styleIsolation	❌	✅ (shared)	❌	❌	仅微信小程序可用
全局样式 (scoped 去掉)	✅	✅	✅	✅	通用，但可能污染全局样式

---

2. 多端兼容的最佳实践

（1）通用方案：::v-deep + !important（Vue 2/3）

<style scoped>
/* 适用于 H5 和 App（Android/iOS） */
::v-deep #rememberbox .uni-checkbox-input {border-color: red !important;border-radius: 50%;
}/* 选中状态 */
::v-deep #rememberbox .uni-checkbox-input.uni-checkbox-input-checked {background-color: red !important;
}
</style>

生效范围：

• ✅ H5
• ✅ App（Android/iOS，部分 uniapp 版本支持）
• ❌ 微信/支付宝小程序（需额外处理）

---

（2）小程序专属方案：options.styleIsolation（仅微信）

export default {options: {styleIsolation: 'shared' // 微信小程序生效}
}

生效范围：

• ✅ 微信小程序（可穿透组件样式）
• ❌ 其他平台（需结合其他方法）

---

（3）终极兼容方案：条件编译 + 全局样式

/* 所有平台通用样式（非scoped） */
.rememberbox-custom .uni-checkbox-input {border: 1px solid red !important;
}/* 仅微信小程序生效 */
/* #ifdef MP-WEIXIN */
.rememberbox-custom .uni-checkbox-input {transform: scale(1.2);
}
/* #endif */

HTML：

<uni-data-checkbox class="rememberbox-custom" ...></uni-data-checkbox>

---

3. 真机调试注意事项

1. Android/iOS（App）：

   • 部分 uniapp 版本可能不支持 ::v-deep，建议用 !important 或全局样式。
   • 真机调试时，检查元素是否应用了目标样式，可能需要 view 层级调整。

2. 微信小程序：

   • 必须使用 options.styleIsolation 或全局样式。
   • 部分基础组件样式可能无法修改（需用 !important 强制覆盖）。

3. 支付宝/百度/字节跳动小程序：

   • 不支持深度选择器，只能用全局样式 + !important。

---

4. 总结

平台	推荐方法
H5	::v-deep 或 :deep() + !important
App（Android/iOS）	::v-deep + !important（如无效，改用全局样式）
微信小程序	options.styleIsolation: 'shared' + 全局样式 + !important
其他小程序	全局样式 + !important + 条件编译 (#ifdef MP-XX)

如果仍然无效，可以尝试：

1. 检查 DOM 结构（H5 端用浏览器开发者工具）。
2. 使用 更具体的选择器（如加 id 或父类限制）。
3. 在 App.vue 中写 全局样式 覆盖。