• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序查看官方样式及修改checkbox样式为圆圈

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序中checkbox的样式是正方形的,设计图上给的是一个圆圈,在查看官方demo的时候发现了怎么修改的

  1. 首先在微信官方文档上找到复选框的demo

  1. 然后审查代码找到复选框的样式部分

可以看到选中的复选框的class为wx-checkout-input

选中的样式为wx-checkbox-input-checked

  1. 这样我们就可以自己修改样式了

先弄成圆圈:

	<checkbox class="interestthreecheckbox" value="{{item.id}}"/>
.interestthreecheckbox .wx-checkbox-input {
  border-radius: 50%;
  width: 35rpx;
  height: 35rpx;
}

还可以设置选中的背景颜色

.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked{
  background: lightblue;
  border: 1px solid lightblue;
}

也可以修改对勾的颜色大小

对勾默认的样式:

wx-checkbox .wx-checkbox-input.wx-checkbox-input-checked:before {
    font: normal normal normal 14px/1 "weui";
    content: "\EA08";
    font-size: 22px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%) scale(0.73);
    -webkit-transform: translate(-50%, -48%) scale(0.73);

修改的样式

.interestthreecheckbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  width: 40rpx;/* 选中后对勾大小 */
  height: 40rpx;/* 选中后对勾大小 */
  font-size:80rpx; /* 对勾大小30rpx */
  color:blue; /* 对勾颜色 白色 */
}


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Java后台获取微信小程序用户信息、openid发布时间:2022-07-18
下一篇:
一个小程序引发的思考发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap