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

Dear 丶 2021-11-10 08:00 1054阅读 0赞

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

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

![SouthEast][]  
**复选按钮（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:

<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

[https_blog.csdn.net_abs1004_article_details_78922596]: https://blog.csdn.net/abs1004/article/details/78922596
[SouthEast]: /images/20211109/f2529ac8c3474a959dc70aec67075c2d.png