微信小程序如何修改radio和checkbox的默认样式和图标

2020-03-21 15:51:00

字体：大中小

来源：转载

供稿：网友

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>

我们看一下原生的效果：

微信小程序,radio,checkbox

修改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; */ }

修改后的单选框样式：

微信小程序,radio,checkbox

复选框同理

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; */ }

修改前后对比：

前

微信小程序,radio,checkbox