uniapp 支付宝小程序 checkbox默认样式修改


参考:

支付宝小程序开发——修改小程序原生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>

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM