微信小程序-checkbox默认样式修改

微信小程序有提供了CSS属性，你可以在文档或者小程序debug看下

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

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

/* 选中后的背景样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
  border: none;
  background: #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);
}

disabled 样式 .wx-checkbox-input-disabled

.checkbox .wx-checkbox-input.wx-checkbox-input-disabled {
    border: none;
    background: #f3b19a;
}

**

radio样式修改:

**

radio .wx-radio-input {
  margin-right: 15rpx ;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: none;
  border-radius: 6rpx;
  box-sizing: border-box;
}

radio .wx-radio-input.wx-radio-input-checked {
  background-color: transparent;
  border-color: #2cc078;
  overflow: hidden;
  box-sizing: border-box;
}

radio .wx-radio-input.wx-radio-input-checked::before {
  content: url(http://www.lutao.com/front/images2014/common/tick.svg);
  background-size: 20rpx 20rpx;
  font-family: "iconfont" !important;
  font-size: 10rpx;
  color: #2cc078;
  top: auto;
  left: auto;
  right: -4rpx;
  bottom: -4rpx;
  transform: translate(0, 0) scale(1);
  -webkit-transform: translate(0, 0) scale(1);
}