Web前端开发资源网今天在一个项目中用到的 uni-app 的 checkbox 组件，该组件有一个 color 属性，声称可以修改多选按钮的颜色。我尝试修改成红色，结果边框还是蓝色：
<checkbox class="agree-btn" color="red"/>
直接用 CSS 修改其样式是不生效的，搞了半天，找到原因和注意事项：
1、因为 uni-app 的默认组件是定义好了的，如果要修改需要去引入的 components 里去找到对应的插件，对应的类名，然后在插件里修改，也可以自行修改样式并覆盖原有样式。
2、选择自行修改的时候，一定在 app.vue 页面去引入更改的 css 或者直接在此页面进行修改，否则修改无效。
3、不要在 style 中增加 scoped 属性。
4、注意小程序中跟 h5 页面是略有不同的，如下官方语句：
checkbox 的默认颜色，在不同平台不一样。微信小程序是绿色的，字节跳动小程序为红色，其他平台是蓝色的。更改颜色使用 color 属性。
如需调节 checkbox 大小，可通过 css 的 scale 方法调节，如缩小到70%
style="transform:scale(0.7)"
修改方法：
1、直接将 .wxss 在 app.vue 中引入：
@import './styles/w3h5.com_checkbox.wxss';
或者：
2、在 app.vue 的 <style> 中添加 CSS 代码，下面是我的修改代码：
.agree-btn .uni-checkbox-input{
width: 24upx;
height: 24upx;
border: 1px solid #FF3B30;
}
.agree-btn .uni-checkbox-input.uni-checkbox-input-checked,.agree-btn:not([disabled]) .uni-checkbox-input:hover{
border: 1px solid #FF3B30;
}这样就可以修改成功了。
推荐阅读：
使用flexible后 不同设备的data-dpr还始终为1解决方法
Z-Blog 搜索报错：Cannot pass parameter 1 by reference 解决方法