小程序修改checkbox的默认样式

微信小程序有提供CSS选择器供开发者编辑checkbox的样式，如下：

未选中的背景样式：wx-checkbox-input
选中后的背景样式 ： wx-checkbox-input.wx-checkbox-input-checked
选中后的勾子的样式：wx-checkbox-input.wx-checkbox-input-checked::before

一、使用uniapp开发的小程序：修改checkbox的默认样式，以及修改禁用后的样式

编写checkbox的css，这个样式必须写在项目的App.vue文件里，如果怕影响了其他页面，可以在checkbox的样式前添加唯一的类名或id：
app.vue文件：

<style lang="scss">
//修改checkbox的默认样式：
.xxxxx {
		uni-checkbox .uni-checkbox-input,
		checkbox .wx-checkbox-input {
			border-radius: 50% !important;
		}
	
		uni-checkbox .uni-checkbox-input,
		checkbox .wx-checkbox-input.wx-checkbox-input-checked {
			color: #fff !important;
			background: #ff6600 !important;
		}
	}
	
//修改禁用后的默认样式：
.xxxx {
		//修改禁用后勾选状态的样式
		uni-checkbox[aria-disabled="true"][value="true"] .uni-checkbox-input,
		checkbox[aria-disabled="true"][value="true"] .wx-checkbox-input.wx-checkbox-input-checked {
			background-color: #e1e1e1 !important;
		}
		
		//修改禁用后不勾选状态的样式
		uni-checkbox[aria-disabled="true"][value="false"] .uni-checkbox-input,
		checkbox[aria-disabled="true"][value="false"] .wx-checkbox-input {
			background-color: #000 !important;
		}
	}
</style>

二、使用原生开发的小程序：修改checkbox的默认样式

修改原生checkbox的默认样式并不需要将样式写在类似上文提及的App.vue这样的全局文件中，只需要将样式写在checkbox所在页面对应的 .wxss 文件中即可。

/* 未选中的背景样式 */
checkbox .wx-checkbox-input{
  width: 40rpx; 
  height: 40rpx; 
  border-radius: 50%;
}

/* 选中后的背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  border-color: #37C674;
  background-color: #37C674;
}

/* 选中后的勾子样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  width: 40rpx;
  height: 40rpx;
  line-height: 40rpx;
  border-radius: 50%;
  text-align: center;
  font-size:32rpx; 
  color:#FFF; 
  background: transparent;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}