二十四、小程序中改变checkbox和radio的样式

来源：https://blog.csdn.net/qq_39364032/article/details/79742415

?

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93

在微信小程序里面，有时候为了配合整个项目的风格，checkbox和radio的样式会有些不同。   1. 修改checkbox样式   .wxml   <checkbox-group class='pull-left' bindchange="checkboxChange">   <label class="checkbox flex flex-vc ">   <checkbox bindchange='checkboxChange' value="" checked="{{checkboxStatus}}" color='#fff'/>   <view>可用2000个积分币抵扣</view>   </label>   </checkbox-group>   .wxss   /* checkbox未选中时样式 */   checkbox .wx-checkbox-input{   border-radius: 3rpx;   height: 26rpx;   width: 26rpx;   margin-top: -4rpx;   /* 自定义样式.... */   }        /* checkbox选中时样式 */   checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{   background-color: #e02e24;   border: 1rpx solid #e02e24;   /* 自定义样式.... */   }   2. 修改radio样式   .wxml   <radio-group class="radio-group" bindchange="radioChange">     <label class="radio" wx:for="{{items}}">       <radio value="{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}}     </label></radio-group>   .wxss   /* radio未选中时样式 */   radio .wx-radio-input{   border-radius: 3rpx;   height: 26rpx;   width: 26rpx;   margin-top: -4rpx;   /* 自定义样式.... */   }        /* radio选中时样式 */   radio .wx-radio-input.wx-radio-input-checked::before{   background-color: #e02e24;   border: 1rpx solid #e02e24;   /* 自定义样式.... */   }