微信小程序的单选/复选按钮样式

转载原博地址：https://blog.csdn.net/abs1004/article/details/78922596

原理：直接覆盖微信小程序定义的 单选/复选按钮样式，从根本上实现样式自定义；本文采用的方法不需要隐藏原来的按钮，也不需要在按钮上附加样式表。
场景：商城购物车 复选框
效果：仿天猫购物车的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>
 
 

 
 
1
2
3
4
5
6
7

.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);
}
 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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>
 
 

 
 
1
2
3
4
5
6
7
8

.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);
}

 
 

 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26