修改小程序checkbox/radio样式（样式自定义）

一、 修改小程序radio样式

直接放代码吧，没啥好说的

wxml代码：

<radio-group>
	<label wx:for="{{item.spec_value}}" wx:key="index" class="gg_shuxing" data-specval='{{item.id}}' bindtap="getvalue">
		<radio value="{{item.id}}" checked="{{false}}" class="gg_radio" />
		<view class="gg_gg">{{item.spec_value}}</view>
	</label>
</radio-group>

wxss代码：
我用的是class样式，更方便理解，如果要是直接将gg_radio换成radio，同一个页面中如果有两个radio，且想让样式不一样，就会出问题

/* 自定义 radio 样式 */
/* 这一句不加也没事，最好还是加上吧 */
.gg_radio{
  width: 38rpx;
}
/* radio 选中框样式 */
.gg_radio .wx-radio-input{
  border-radius: 50%; 
  width: 28rpx;
  height: 28rpx;
}
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
.gg_radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background: red;
}
/* 选中后的样式 （可根据设计稿需求自己修改） 对勾大小、背景颜色*/
.gg_radio .wx-radio-input.wx-radio-input-checked::before{
  border-radius: 50%;
  width: 44rpx; 
  height: 44rpx; 
  line-height: 44rpx;
  text-align: center;
  font-size: 26rpx; 
  color:#fff;
  background: #fe6732;
  border-color: #fe6732;
}

js代码:

js你们自己写就行，就是从服务器器获取数据，动态生成就可以了

二、 修改小程序checkbox样式

直接放代码吧，没啥好说的

wxml代码：

<checkbox-group>
	<label wx:for="{{item.spec_value}}" wx:key="index" class="gg_shuxing" data-specval='{{item.id}}' bindtap="getvalue">
		<checkbox value="{{item.id}}" checked="{{false}}" class="gg_checkbox" />
		<view class="gg_gg">{{item.spec_value}}</view>
	</label>
</radio-checkbox>

wxss代码：
我用的是class样式，更方便理解，如果要是直接将gg_radio换成radio，同一个页面中如果有两个radio，且想让样式不一样，就会出问题

/* 自定义 radio 样式 */
/* radio 选中框样式 */
.gg_checkbox .wx-checkbox-input{
  border-radius: 50%; 
  width: 28rpx;
  height: 28rpx;
}
/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
.gg_checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: red;
}
/* 选中后对勾的样式 （可根据设计稿需求自己修改） 对勾大小、背景颜色*/
.gg_checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
  border-radius: 50%;
  width: 44rpx; 
  height: 44rpx; 
  line-height: 44rpx;
  text-align: center;
  font-size: 26rpx; 
  color:#fff;
  background: #fe6732;
  border-color: #fe6732;
}

js代码:

js你们自己写就行，就是从服务器器获取数据，动态生成就可以了