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