uni-app表单多项选择器需要使用内置组件checkbox，具体使用见官网链接，如下：
checkbox - uni-app官网 (dcloud.io)
官方给出h5端的默认样式是这样的：
现在需要修改样式为这样：
于是开始修改：
<checkbox-group @change="checkboxChange">
<label class="radio">
<checkbox :value="item+''" class="checkbox"/>
<image :src="item.imgUrl" class="friend-avator"></image>
view class="friend-name">{{item.name}}</view>
</label>
</checkbox-group>
......
<style scoped>
.checkbox:active{
border: 2rpx solid #24c023 !important;
background-color: #24c023 !important;
color: #FFFFFF !important;
}
......
<style>添加的样式无法实现最终效果，即使添加了!important修饰依旧无效。
随后发现既然checkbox是内置组件，那么一定要通过checkbox组件内的类名或id名修改样式，于是在开发这工具中找到了内置的类名
但修改后依旧无法实现......
需要解决此问题，先要明白style标签添加scoped属性后，当前组件的所有元素标签都会统一添加一个如data-v-xxxx的自定义属性，最终浏览器会以该属性为属性选择器匹配样式。目的是为了防止当前组件和子组件或其它组件存在重复的class名发生冲突。
为了保险起见，这里的style标签全部用scoped属性进行了修饰，当然如果不担心命名冲突，完全可以不使用scoped属性，那么只要找到checkbox内的类名进行修改，就可以解决问题了。
所以当存在scoped属性时想在父组件中修改子组件的样式，直接通过子组件的类名是无效的，要实现样式穿透，需要使用深度作用选择器，在子组件中的类名前添加 >>> ，如下：
/* checkbox样式 */
>>> .uni-checkbox-input{
margin-right: 0;
border-radius: 50% ;
border: 2rpx solid #828181 ;
}
/* 取消选中后的样式 */
>>> uni-checkbox:not([disabled]) .uni-checkbox-input:hover{
border: 2rpx solid #828181;
}
/* 选中时的样式 */
>>> uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked{
border: 2rpx solid #24c023 !important;
background-color: #24c023 !important;
color: #FFFFFF !important;
}
样式生效~~~
总结一下，深度作用选择器
但是......就这么结束了？？？
emmm......当打开小程序开发者工具调试，发现在浏览器中生效的样式根本没有生效
审核元素发现在小程序开发者工具中，checkbox组件是被黑盒封装的，根本无法查看组件内部的类名，也就是说无法知晓修改的类名是否生效了。
于是查阅资料发现，小程序平台checkbox组件实际内部类名和h5端不一致，所以若要兼容多平台需要写两套样式，在uni-app中可以使用条件注释跨段兼容，以下代码仅在小程序端生效：
/* ifdef MP-WEIXIN */
/*checkbox 选项框大小 */
>>> checkbox .wx-checkbox-input {
border-radius: 50% !important;
/* background-color: #FFFFFF; */
border: 2rpx solid #828181 !important;
}
/*checkbox选中后样式 */
>>> checkbox .wx-checkbox-input.wx-checkbox-input-checked {
border: 2rpx solid #24c023 !important;
background-color: #24c023 !important;
color: #FFFFFF !important;
}
/*checkbox选中后图标样式 */
>>> checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
color: #FFFFFF !important;
}
/* endif */
关于条件注释，可以查看：条件编译 解决各端差异 - uni-app官网 (dcloud.io)
