微信小程序 修改默认单选，多选按钮样式

微信小程序 修改默认单选，多选按钮样式

1.在微信开发者文档中复制一份单选或者多选的代码

<!--pages/index3/index.wxml-->
<radio-group bindchange="radioChange">
        <label class="weui-cell weui-check__label" style="display: flex;">
            <radio value="1" checked="true"/>
          <view class="weui-cell__bd">按钮1</view>
        </label>
        <label class="weui-cell weui-check__label" style="display: flex;">
            <radio value="1" checked="true"/>
          <view class="weui-cell__bd">按钮1</view>
        </label>
        <label class="weui-cell weui-check__label" style="display: flex;">
            <radio value="1" checked="true"/>
          <view class="weui-cell__bd">按钮1</view>
        </label>
      </radio-group>

2. 根据情况复制单选或者多选代码即可

index.wxss

/* pages/index3/index.wxss */
/* 单选按钮样式 */
.wx-radio-input {
    width: 32rpx !important;
    height: 32rpx !important;
    border-radius: 100%;
    background-color: #fff !important;
  }
  /*勾选样式 */
  .wx-radio-input.wx-radio-input-checked {
    border: none !important;
    background-color: #6784f5 !important;
  }

  /* 多选框样式 */

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

  

这样就ok了。

注：仅记录方便开发查找。