【微信小程序】checkbox radio的样式修改

一、checkbox样式修改

默认勾选与未勾选样式

wxml

<checkbox color="#fff" value="{{id}}" checked="{{checked}}"></checkbox>

设置wxss文件

更改大小、勾选背景颜色等：

// 未勾选样式.wx-checkbox-input {width: 33rpx !important;height: 33rpx !important;}//环形的外圈radio .wx-radio-input.wx-radio-input-checked {border: 2rpx solid #00bcd4 !important;}//选中后背景及勾的样式radio .wx-radio-input.wx-radio-input-checked::before {border-radius: 50%;width: 20rpx;height: 20rpx;line-height: 20rpx;text-align: center;font-size: 0;background: #00bcd4;transform: translate(-50%, -50%) scale(1);}

修改radio的样式为环形

// 未勾选样式.wx-checkbox-input {width: 33rpx !important;height: 33rpx !important;}// 勾选样式.wx-checkbox-input.wx-checkbox-input-checked{border-color:#00BCD4 !important;background:#00BCD4 !important;}

二、radio样式修改

wxml中的color要给一个值

<radio value="0" bindtap="radioChange" checked="{{check}}" color="#fff"></radio>

设置wxss文件

// 未勾选样式.wx-radio-input {width: 32rpx !important;height: 32rpx !important;border-radius: 100%;background-color: #fff !important;}// 勾选样式.wx-radio-input.wx-radio-input-checked {width: 32rpx !important;height: 32rpx !important;background-color: #00bcd4 !important;}