uni-app小程序自定义checkbox，改样式改形状

展示效果图

选中时的样式

未选择时的样式

颜色可以随意更改，形状原为方块，可以更改为圆形，以下是代码：

提前准备–写在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：

<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：

checkboxChange: function(e) {
    
     //监听勾选框变化			
	if (e.target.value.length > 0) {
    
    
		this.checked = true  //checked在data中定义
	} else {
    
    
		this.checked = false
	}
},