支付宝小程序修改checkbox样式

在开发支付宝小程序的时候，经常会用到多选的需求，支付宝有提供 checkbox-group 组件，但是默认的样式有时并不能满足，支付宝小程序又不支持修改默认样式，网上找了很多方法都不是很适合，所以这里自己提供了一个方法，应该算是比较完美的了，具体实现方式如下：

  <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;
}

效果如下： S

由于支付宝小程序没有提供修改组件默认样式的方法，但是我们可以通过 checkbox-checked 来修改组件被选择后的样式，这里主要是通过 content 和 color: rgba(0,0,0,0) 来实现文字的隐藏，然后通过设置背景图片来实现选择后的样式，有一个注意的点是默认的 checkbox 被选后是有一个打勾的样式的，它应该是通过字体图标的形式实现的，所以要在组件上设置 color="rgba(0,0,0,0)" 将它隐藏。

通过上面的实现方式，可以完全自定义多选框的大小和图标样式，还有一个注意的点是如果需要改变多选框的大小，多选框和文字大小会对不齐，这时只要加上以下样式就可以了，具体大小可以根据自己的需求来。

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

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

赏