主要通过 .wx-checkbox-input 、.wx-checkbox-input-checked 以及 .wx-checkbox-input-checked::before 三个类名来设置 checkbox 的样式。
.wx-checkbox-input 用于设置未选中时框的样式
checkbox .wx-checkbox-input {
width: 32rpx;
height: 32rpx;
border-color: #409eff;
background-color: transparent;
transition: background-color .2s;
}
.wx-checkbox-input-checked 用于设置选中后框的样式，为了覆盖原生样式，需要与 .wx-checkbox-input 类连写，否则权重不够。
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #fff; /* 这里也可以设置对钩的颜色 */
background-color: #409eff;
}
文章来源：https://www.toymoban.com/news/detail-517649.html
.wx-checkbox-input-checked::before 用于设置选中后对钩的样式，也需要与 .wx-checkbox-input 类连写。文章来源地址https://www.toymoban.com/news/detail-517649.html
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);
}
到了这里，关于微信小程序使用 checkbox 如何修改样式？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
