微信小程序修改radio和checkbox的默認樣式和圖標

wxml：

          <view class="body">
            <view class="body-content">
              第1題：企業的價值觀是 ？
            </view>
            <view class="label">單選</view>
          </view>
          <view class="options">

            <radio-group class="radio-group" bindchange="radioChange">
              <label class="radio" wx:for="{{items}}" wx:key="{{index}}">
                <view>
                  <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} 
                </view>
              </label>

            </radio-group>

          </view>

我們看一下原生的效果：

 

 修改wxml中的redio 組件的color屬性：

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

 

wxss（只有修改樣式的部分）：

/* 單選、多選 勾選 */


/*radio未選中時樣式 */ 
radio .wx-radio-input{ 
  /* 自定義樣式.... */
/* 我這里沒有進行，未選中的樣式修改
    height: 40rpx; 
    width: 40rpx;
    margin-top: -4rpx;
    border-radius: 50%;
    border: 2rpx solid #999;
    background: transparent;
     */

 }


/* 選中后的 背景樣式 （紅色背景 無邊框 可根據UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked {
   /* border: none; */
   border-color: #2792ff!important;
   /* background-color: #fff!important; */
   /* background-color: transparent!important; */
   /* 居中 */
/* 
   display: flex;
   justify-content: center;
   align-items: center;
    */
    
}

/* 選中后的 對勾樣式 （白色對勾 可根據UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before {
  /* 去除對號 */
  content: ''; 
  /* background: #fff; */
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  /* background: red; */
  background-color: #2792ff;
  /* 居中 */
  /* margin-top: 0rpx; */
  /* display: flex; */
  /* position: relative; */
  
}

 

 修改后的單選框樣式：

 

 

 復選框同理。

 

wxml：

          
          <view class="body">
            <view class="body-content">
              第1題：企業的價值觀是 ？
            </view>
            <view class="label">多選</view>
          </view>
          <view class="options">



            <checkbox-group bindchange="checkboxChange">
              <label class="checkbox" wx:for="{{items}}">
                <view>
                  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}

                </view>
              </label>
            </checkbox-group>


          </view>

wxss：

/*checkbox未選中時樣式 */ 
checkbox .wx-checkbox-input{ 
  /* 自定義樣式.... */
  border-radius: 50%;

 }


/* 選中后的 背景樣式 （紅色背景 無邊框 可根據UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
   /* border: none; */
   border-radius: 50%;
   border-color: #2792ff!important;

    
}

/* 選中后的 對勾樣式 （白色對勾 可根據UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  /* 去除對號 */
  content: ''; 
  /* background: #fff; */
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  /* background: red; */
  background-color: #2792ff;
  /* 居中 */
  /* margin-top: 0rpx; */
  /* display: flex; */
  /* position: relative; */
  
}

修改前后對比：

 前：后

 

參考（感謝作者）：https://blog.csdn.net/weixin_41871290/article/details/82686719