在開(kāi)發(fā)支付寶小程序的時(shí)候，經(jīng)常會(huì)用到多選的需求，支付寶有提供 checkbox-group 組件，但是默認(rèn)的樣式有時(shí)并不能滿(mǎn)足，支付寶小程序又不支持修改默認(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樣式

由于支付寶小程序沒(méi)有提供修改組件默認(rèn)樣式的方法，但是我們可以通過(guò) checkbox-checked 來(lái)修改組件被選擇后的樣式，這里主要是通過(guò) content 和 color: rgba(0,0,0,0) 來(lái)實(shí)現(xiàn)文字的隱藏，然后通過(guò)設(shè)置背景圖片來(lái)實(shí)現(xiàn)選擇后的樣式，有一個(gè)注意的點(diǎn)是默認(rèn)的 checkbox 被選后是有一個(gè)打勾的樣式的，它應(yīng)該是通過(guò)字體圖標(biāo)的形式實(shí)現(xiàn)的，所以要在組件上設(shè)置 color="rgba(0,0,0,0)" 將它隱藏。

通過(guò)上面的實(shí)現(xiàn)方式，可以完全自定義多選框的大小和圖標(biāo)樣式，還有一個(gè)注意的點(diǎn)是如果需要改變多選框的大小，多選框和文字大小會(huì)對(duì)不齊，這時(shí)只要加上以下樣式就可以了，具體大小可以根據(jù)自己的需求來(lái)。

.l-b .c-b {
    margin-right: 20rpx;
}

.l-b .c-b::before {
    top: 50%;
    transform: translate(0, -50%);
}