如何自定义小程序组件checkbox勾选的样式

组件名：checkbox, 在小程序中主要作用是复选框，多选项目。

默认情况下，勾选框样式官方已集成，不需要单独写CSS。

  
    选中
  
  
  
    未选中
  

渲染后：

image.png

但是你有需求，需要美化勾选的图标，那么应该如何修改复选框的CSS样式呢？
查了一下资料，微信小程序有提供了CSS属性，如下：

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

有了以上三个属性，我们就可以做修改了。

重写checkbox复选框样式：

/* 未选中的背景样式 */
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);
}

渲染后：

image.png

根据自己的喜好和需求，在选中后的背景样式修改background的颜色值，在选中后的勾子样式修改color的颜色值。