微信小程序--修改checkbox和radio的样式

在微信小程序里面，有时候为了配合整个项目的风格，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" bindchange="radioChange">

  "radio" wx:for="{{items}}">

    "{{item.name}}" checked="{{item.checked}}" color="#fff"/>{{item.value}}

  

.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;

/* 自定义样式.... */

}