主要通過 .wx-checkbox-input 、.wx-checkbox-input-checked 以及 .wx-checkbox-input-checked::before 三個(gè)類名來設(shè)置 checkbox 的樣式。
.wx-checkbox-input 用于設(shè)置未選中時(shí)框的樣式
checkbox .wx-checkbox-input {
width: 32rpx;
height: 32rpx;
border-color: #409eff;
background-color: transparent;
transition: background-color .2s;
}
.wx-checkbox-input-checked 用于設(shè)置選中后框的樣式，為了覆蓋原生樣式，需要與 .wx-checkbox-input 類連寫，否則權(quán)重不夠。
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color: #fff; /* 這里也可以設(shè)置對鉤的顏色 */
background-color: #409eff;
}
文章來源：http://www.zghlxwxcb.cn/news/detail-517649.html
.wx-checkbox-input-checked::before 用于設(shè)置選中后對鉤的樣式，也需要與 .wx-checkbox-input 類連寫。文章來源地址http://www.zghlxwxcb.cn/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);
}
到了這里，關(guān)于微信小程序使用 checkbox 如何修改樣式？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
