支付宝小程序修改checkbox样式

在开发支付宝小程序的时候,经常会用到多选的需求,支付宝有提供 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样式

由于支付宝小程序没有提供修改组件默认样式的方法,但是我们可以通过 checkbox-checked 来修改组件被选择后的样式,这里主要是通过 contentcolor: 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%);
}

你可能感兴趣的:(支付宝小程序修改checkbox样式)