【微信小程序】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;
}