展示效果图
选中时的样式
未选择时的样式
颜色可以随意更改，形状原为方块，可以更改为圆形，以下是代码：
提前准备–写在app.vue页面
#ec6330为CheckBox颜色，可以自行更改。
<style>
/*每个页面公共css */
/* //设置圆角 */
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
border-radius: 100upx;
border: 2px solid #ec6330;
}
/* //设置背景色 */
checkbox.red[checked] .wx-checkbox-input,
checkbox.red.checked .uni-checkbox-input {
background-color: #ffffff !important;
border-color: #ec6330 !important;
color: #ec6330 !important;
}
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
content: '\2022';
}
/* //元素使用的时候就是使用 round 和 red */
</style>
元素使用的时候就是使用 round 和 red。例如： <checkbox … class=“round red”>
使用时的页面
html：文章来源：https://www.toymoban.com/news/detail-504187.html
<checkbox-group @change="checkboxChange">
<view class="uni-list-cell">
<label>
<checkbox style="transform: scale(0.9)" class="round red"></checkbox>
</label>
<view>登录即代表同意《隐私政策》《用户协议》</view>
</view>
</checkbox-group>
JavaScript：文章来源地址https://www.toymoban.com/news/detail-504187.html
checkboxChange: function(e) { //监听勾选框变化
if (e.target.value.length > 0) {
this.checked = true //checked在data中定义
} else {
this.checked = false
}
},
到了这里，关于uni-app小程序自定义checkbox，改样式改形状的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
