uni-app如何修改checkbox默认样式-uni-app-PHP中文网

必须在App.vue中写全局样式才能生效，因uni-app的checkbox在小程序编译为原生标签、H5下受浏览器限制，scoped样式无法穿透；需用精确类名（如.wx-checkbox-input和.uni-checkbox-input）配合!important覆盖。

直接在 App.vue 写全局样式才能生效

uni-app 的 checkbox 在小程序平台被编译为原生标签（如微信的 <checkbox></checkbox>），h5 下虽是 <input type="checkbox">，但浏览器默认禁用大部分样式控制。scoped 样式完全穿透不了，所以必须把覆盖规则写在 app.vue 的 <style></style> 里，且不能加 scoped。

常见错误：在页面组件里用 ::v-deep 或 /deep/ 尝试覆盖——H5 可能偶现有效，小程序 100% 失效；加了 !important 也不行，因为原生组件根本不解析你写的 CSS 类。

类名要精确匹配平台输出的实际 class，比如微信小程序是 .wx-checkbox-input，App 和 H5 是 .uni-checkbox-input
必须同时写两个选择器，缺一不可：checkbox.my-checkbox.wx-checkbox-input 和 checkbox.my-checkbox.uni-checkbox-input
所有尺寸、颜色、圆角等都要用 !important，否则会被平台默认值顶掉

用自定义类名 + 强力选择器精准命中

给 <checkbox></checkbox> 组件加一个自定义 class（比如 class="my-checkbox"），然后在 App.vue 中用组合选择器锁定它。这是目前最稳定、跨端兼容性最好的方式。

示例写法：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

checkbox.my-checkbox.wx-checkbox-input,
checkbox.my-checkbox.uni-checkbox-input {
  width: 32rpx !important;
  height: 32rpx !important;
  border-radius: 50% !important;
  border: 2rpx solid #ccc !important;
  background-color: #fff !important;
}
checkbox.my-checkbox[checked].wx-checkbox-input,
checkbox.my-checkbox.checked.uni-checkbox-input {
  background-color: #2979ff !important;
  border-color: #2979ff !important;
}
checkbox.my-checkbox.uni-checkbox-input-checked::before,
checkbox.my-checkbox.wx-checkbox-input-checked::before {
  font-size: 26rpx !important;
  color: #fff !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

未选中态靠 border 和 background-color 控制外观
选中态背景色和边框色必须分开写，[checked] 和 .checked 是不同平台的标识
::before 伪元素只在 H5 生效，小程序实际渲染的是原生对勾，但加这个不影响；字体大小别超过容器，否则溢出

color 属性只能改选中图标颜色，别指望它做全部

color 属性确实能跨端统一控制「选中状态」下的图标色（小程序对应 activeColor，H5 通过伪元素模拟），但它完全不控制未选中边框、背景、尺寸、形状。很多人以为设个 color="#ff0000" 就万事大吉，结果发现方框还是方的、灰色边框还在、大小没变——这就是混淆了「主题色」和「完整样式定制」。