Establezca principalmente el estilo de la casilla de verificación a través de y .wx-checkbox-inputtres nombres de clase..wx-checkbox-input-checked.wx-checkbox-input-checked::before
.wx-checkbox-inputSe utiliza para establecer el estilo del cuadro cuando no está seleccionado
checkbox .wx-checkbox-input {
width: 32rpx;
height: 32rpx;
border-color: #409eff;
background-color: transparent;
transition: background-color .2s;
}
.wx-checkbox-input-checkedSe utiliza para establecer el estilo del cuadro seleccionado Para anular el estilo original, debe .wx-checkbox-inputescribirse junto con la clase, de lo contrario, el peso no es suficiente.
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #fff; /* 这里也可以设置对钩的颜色 */
background-color: #409eff;
}
.wx-checkbox-input-checked::beforeSe utiliza para establecer el estilo de la marca de verificación después de la selección y también debe .wx-checkbox-inputescribirse junto con la clase.
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);
}