小程序复选框的样式

• 选中前

  
  
  image

• 选中后

  
  
  image

WXML代码

<view class="cart-check-box">
        <checkbox class="checkbox"></checkbox>
 </view>

WXSS代码

/* 多选框样式 */
.cart-check-box .wx-checkbox-input{
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
}

/* 多选框选中后的样式 */
.cart-check-box .wx-checkbox-input.wx-checkbox-input-checked {
  background: #f95a5f;
  border-color: #f95a5f;
}

/* 选中后的 图标 样式 */
.cart-check-box  .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 25rpx;
  height: 25rpx;
  line-height: 25rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}