Uni-app中check-box默认样式进行自定义 处理

Uni-app中自带的check-box组件支持相应的选中标签的颜色改变。但是却不能直接在组件上进行属性与样式设置，来进行相应的样式处理。找了一圈的技术文档，自己也尝试了几种方案，可以满足基本的自定义，支持直接设置颜色样式，还可以使用切图，替换选中与未选中的状态。

首先，展示一下我项目中使用的一种方案，使用了切图，替换默认的样式。

在自定义过程中，需要注意以下几点：

• 需要设置相应的样式在App.vue中，style标签下不能使用scoped
• 如果在某个组件中使用，可以单独在组件中设置

下面是源码，如果需要引用，可以将一下资源文件替换成自己的。

使用切图替换默认样式

/*自定义样式*/
	/* reg	  */
	uni-checkbox-group {
		width: 100% !important;
	}
	
	/*  */
	uni-checkbox-group uni-label {
		width: 94% !important;
		display: inline-flex;
		margin-bottom: 20rpx;
	}

	/*checkbox 选项框大小  */
	uni-checkbox .uni-checkbox-input {
		background-image: url(static/images/oval_no_check@2x.png);
		width: 30rpx !important;
		height: 30rpx !important;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
                /*
                使形状呈圆形
                */
		border-radius: 50%; 
		border: 1rpx solid transparent;
	}

	/*checkbox选中后样式  */
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background-image: url(static/images/oval_check@2x.png);
		/* background:#048474; */
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		
	}

	/*checkbox选中后图标样式  */
	uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
		width: 20rpx;
		height: 20rpx;
		line-height: 20rpx;
		text-align: center;
		border: 0rpx solid transparent;
		font-size: 18rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}

如果需要替换成纯色的背景，可以使用属性background-color来设置相应的纯色方案。