小程序自定义组件使用checkbox如何修改样式？

微信小程序有提供了CSS属性

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);

}