微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

原理:直接覆盖微信小程序定义的 单选/复选按钮样式,从根本上实现样式自定义;本文采用的方法不需要隐藏原来的按钮,也不需要在按钮上附加样式表。
场景:商城购物车 复选框
效果:仿天猫购物车的UI
使用:如果单独页面单独样式,就写到对应page的wxss里,如果整个小程序都用此样式,就写到app.wxss里


复选按钮(checkbox)修改及使用如下
.wxml:

   <checkbox-group bindchange="checkboxChange" >
       <label  wx:for="{{cartArr}}">
           <checkbox value="{{index}}"></checkbox>
           <view>{{item.name}}</view>
           <!-- 其他布局代码 -->    
       </label>   
   </checkbox-group>

.wxss:

/*  重写 checkbox 样式  */
/* 未选中的 背景样式 */
checkbox .wx-checkbox-input{
   border-radius: 50%;/* 圆角 */
   width: 40rpx; /* 背景的宽 */
   height: 40rpx; /* 背景的高 */
}
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: red;
}
/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border-radius: 50%;/* 圆角 */
   width: 40rpx;/* 选中后对勾大小,不要超过背景的尺寸 */
   height: 40rpx;/* 选中后对勾大小,不要超过背景的尺寸 */
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx; /* 对勾大小 30rpx */
   color:#fff; /* 对勾颜色 白色 */
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}

js就不写了,都是自定义事件,跟样式无关。

同理:单选按钮(radio)是同样的修改方法,只需要把wxml文件及wxss文件中 对应的 checkbox 替换成 radio即可

.wxml:

<!-- radiogroup 布局 -->
<radio-group bindchange="radioChange" >
    <label  wx:for="{{cartArr}}">
        <radio value="{{index}}"></radio>
        <view>{{item.name}}</view>
        <!-- 其他布局代码 -->    
    </label>   
</radio-group>

.wxss:

/*  重写 radio 样式  */
/* 未选中的 背景样式 */
radio .wx-radio-input{
   border-radius: 50%;/* 圆角 */
   width: 40rpx;
   height: 40rpx;
}
/* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background: red;
}
/* 选中后的 对勾样式 (白色对勾 可根据UI需求自己修改) */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50%;/* 圆角 */
   width: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
   height: 40rpx; /* 选中后对勾大小,不要超过背景的尺寸 */
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx; /* 对勾大小 30rpx */
   color:#fff; /* 对勾颜色 白色 */
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值