微信小程式--修改checkbox和radio的樣式
在微信小程式裡面,有時候為了配合整個專案的風格,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;
/* 自定義樣式.... */
}