在開發(fā)支付寶小程序的時(shí)候缩宜，經(jīng)常會(huì)用到多選的需求吊履，支付寶有提供 checkbox-group 組件，但是默認(rèn)的樣式有時(shí)并不能滿足氛雪，支付寶小程序又不支持修改默認(rèn)樣式，網(wǎng)上找了很多方法都不是很適合耸成，所以這里自己提供了一個(gè)方法报亩，應(yīng)該算是比較完美的了浴鸿，具體實(shí)現(xiàn)方式如下：
<checkbox-group onChange="change">
<label class="l-b">
<checkbox value="spring" checked="{{true}}" class='c-b' color="rgba(0,0,0,0)" />spring
</label>
<label class="l-b">
<checkbox value="summer" class='c-b' color="rgba(0,0,0,0)" />summer
</label>
</checkbox-group>
.l-b {
position: relative;
}
.l-b .c-b {
position: relative;
border: none;
}
.l-b .c-b::before {
content: '1';
position: absolute;
left: 0;
width: 40rpx;
height: 40rpx;
border: 1px solid #ccc;
border-radius: 50%;
color: rgba(0,0,0,0);
}
.l-b checkbox-checked::before{
content: '1';
width: 40rpx;
height: 40rpx;
background: url('https://img2.baidu.com/it/u=2039888236,1988881837&fm=26&fmt=auto&gp=0.jpg') no-repeat;
background-size: 100% 100%;
border: none;
}
效果如下：
修改checkbox樣式
由于支付寶小程序沒有提供修改組件默認(rèn)樣式的方法，但是我們可以通過 checkbox-checked 來修改組件被選擇后的樣式弦追，這里主要是通過 content 和 color: rgba(0,0,0,0) 來實(shí)現(xiàn)文字的隱藏岳链，然后通過設(shè)置背景圖片來實(shí)現(xiàn)選擇后的樣式，有一個(gè)注意的點(diǎn)是默認(rèn)的 checkbox 被選后是有一個(gè)打勾的樣式的劲件，它應(yīng)該是通過字體圖標(biāo)的形式實(shí)現(xiàn)的掸哑，所以要在組件上設(shè)置 color="rgba(0,0,0,0)" 將它隱藏。
通過上面的實(shí)現(xiàn)方式零远，可以完全自定義多選框的大小和圖標(biāo)樣式苗分，還有一個(gè)注意的點(diǎn)是如果需要改變多選框的大小，多選框和文字大小會(huì)對(duì)不齊牵辣，這時(shí)只要加上以下樣式就可以了俭嘁，具體大小可以根據(jù)自己的需求來。
.l-b .c-b {
margin-right: 20rpx;
}
.l-b .c-b::before {
top: 50%;
transform: translate(0, -50%);
}
