【微信小程序】checkbox,radio的样式修改-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序】checkbox,radio的样式修改。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、checkbox样式修改

默认勾选与未勾选样式
【微信小程序】checkbox,radio的样式修改

wxml

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

设置wxss文件
更改大小、勾选背景颜色等：
【微信小程序】checkbox,radio的样式修改

// 未勾选样式
.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的样式为环形
【微信小程序】checkbox,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文件文章来源地址https://www.toymoban.com/news/detail-503698.html

// 未勾选样式
.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;
}