How to modify the style of checkbox in WeChat applet?

　　Mainly set the style of checkbox through .wx-checkbox-input, .wx-checkbox-input-checkedand three class names..wx-checkbox-input-checked::before

.wx-checkbox-inputUsed to set the style of the box when it is not selected

checkbox .wx-checkbox-input {
    
    
	width: 32rpx; 
    height: 32rpx;
    border-color: #409eff;
    background-color: transparent;
    transition: background-color .2s;
}

.wx-checkbox-input-checkedIt is used to set the style of the selected box . In order to cover the original style, it needs to .wx-checkbox-inputbe written in conjunction with the class, otherwise the weight is not enough.

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    
    
	color: #fff; /* 这里也可以设置对钩的颜色 */
    background-color: #409eff;
}

.wx-checkbox-input-checked::beforeIt is used to set the style of the checkmark after selection , and it also needs to .wx-checkbox-inputbe written in conjunction with the class.

checkbox .wx-checkbox-input {
    
    
	/* content: ""; */ /* 不想显示对钩可以将 content 置空 */
	width: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
    color: #fff;
    font-size: 32rpx;
    text-align: center;
    background-color: transparent;
    transform: translate(-50%, -50%) scale(1);
}