在微信小程式裡面，有時候為了配合整個專案的風格，checkbox和radio的樣式會有些不同。

1. 修改checkbox樣式

.wxml

<checkbox-groupclass='pull-left'bindchange="checkboxChange">

<labelclass="checkbox flex flex-vc ">

<checkboxbindchange='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:1rpxsolid#e02e24;

/* 自定義樣式.... */

}

2. 修改

.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:3

height:26rpx;

width:26rpx;

margin-top:-4rpx;

/* 自定義樣式.... */

}

/* radio選中時樣式 */

radio .wx-radio-input.wx-radio-input-checked::before{

background-color:#e02e24;

border:1rpxsolid#e02e24;

/* 自定義樣式.... */

}