微信小程序 -- checkbox、radio改变默认样式

在微信小程序中，checkbox、radio的默认样式如下：

但是有时我们需要改变它的样式，如其他颜色、多项选择为圆圈、单项选择为方框等等。例子如下：
   

实现如下：

1. checkbox样式

/* 未选中的 背景样式 */
checkbox .wx-checkbox-input {
  width: 35rpx; /* 背景的宽 */
  height: 35rpx; /* 背景的高 */
  line-height: 35rpx;
  border-radius: 3px;/* 圆角:border-radius: 50%; */
}

/* 选中后的 背景样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  border: 1rpx solid #04b06d;
  background: #04b06d;
  width: 35rpx; /* 背景的宽 */
  height: 35rpx; /* 背景的高 */
  line-height: 35rpx;
}

/* 选中后的 对勾样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  /* border-radius: 50%;圆角 */
  width: 35rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  height: 35rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 35rpx;
  text-align: center;
  font-size: 30rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

效果如下：

如果想要它由方框变成圆形，只需要border-radius: 50%;

效果如下：

2. radio样式

radio .wx-radio-input{
  width: 35rpx;
  height: 35rpx;
  line-height: 35rpx;
  border-radius: 3px;/* 圆角:border-radius: 50%; */
}
radio .wx-radio-input.wx-radio-input-checked {
  border: 1rpx solid #4788E5;
  background: #4788E5;
  width: 35rpx; /* 背景的宽 */
  height: 35rpx; /* 背景的高 */
  line-height: 35rpx;
}
radio .wx-radio-input.wx-radio-input-checked::before {
  width: 35rpx;
  height: 35rpx;
  line-height: 35rpx;
  text-align: center;
  font-size: 30rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

效果如下：

如果想要它由方框变成圆形，只需要border-radius: 50%;

效果如下：