参考:

支付宝小程序开发——修改小程序原生radio默认样式 - 逍遥云天 - 博客园 (cnblogs.com)

支付宝小程序的checkbox组件样式问题-帖子详情-开放社区 (alipay.com)

(1条消息) 浅谈 css的zoom属性_前端小白-CSDN博客

我的样式修改代码:

/* #ifdef MP-ALIPAY  */
checkbox{
  margin:0 20rpx 0 25rpx;
  width: 28rpx;
  height: 28rpx;
  border-radius: 0rpx;
  /* position: absolute; */
  /* top: 15rpx; */
  /* left: 30rpx; */
}

/*checkbox选中后样式  */
checkbox-checked {
  zoom:0.7;
  border: 2rpx solid #CB1E36;
  background-color: #CB1E36;
  border-radius: 0rpx;
}

/*checkbox选中后图标样式  */
//支付宝好像不支持伪类,此样式不生效
checkbox-checked ::before {
  width: 28rpx;
  height: 28rpx;
  line-height: 28rpx;
  text-align: center;
  font-size: 14rpx;
  color: #FFFFFF;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
/* #endif */

上面的代码只能修改方框大小背景等,对勾的颜色还是得参考文档直接在组件对color传参修改
<checkbox :checked="if_checked"  color="#FFFFFF" ></checkbox>

 

posted on 2021-02-05 16:48  巍MG  阅读(1197)  评论(0编辑  收藏  举报