快捷導(dǎo)航

微信小程序如何修改radio和checkbox的默認樣式和圖標(biāo)

更新時間：2019年07月24日 11:22:57 作者：暗戀桃花源丫

這篇文章主要介紹了微信小程序修改radio和checkbox的默認樣式和圖標(biāo),文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

wxml：

<view class="body">
      <view class="body-content">
       第1題：企業(yè)的價值觀是 ？
      </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;
   */

 }


/* 選中后的 背景樣式 （紅色背景 無邊框 可根據(jù)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;
  */
  
}

/* 選中后的 對勾樣式 （白色對勾 可根據(jù)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; */
 
}

修改后的單選框樣式：

復(fù)選框同理

wxml：

<view class="body">
      <view class="body-content">
       第1題：企業(yè)的價值觀是 ？
      </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%;

 }


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

  
}

/* 選中后的 對勾樣式 （白色對勾 可根據(jù)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; */
 
}

修改前后對比：

前