修改 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 中寫 全局樣式 覆蓋。