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

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

在微信小程序里面，有时候为了配合整个项目的风格，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;
 
/* 自定义样式.... */
 
}