小程序单选框radio样式修改

拿到UI的图发现按钮是 这样的
但是开发文档上面的是这样的
然后翻遍开发文档也没有找到如何从绿绿变成蓝蓝

好了废话不说了，绿绿接下来要开始变身了

1.WXML代码

			<radio-group name="radio">
				<label>
					<radio value="radio1" />进入提醒</label>
				<label>
					<radio value="radio2" />离开提醒</label>
			</radio-group>

现在样式为
2.添加WXSS样式

/* 选中后的背景样式*/
/*按钮的大小*/
radio .wx-radio-input {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
}
radio .wx-radio-input.wx-radio-input-checked {
   /* 背景颜色 */
  background-color: #fff!important; 
  /* 边框颜色 */
  border-color: #419dea!important;
}
 
/* 选中后的实心样式*/
radio .wx-radio-input.wx-radio-input-checked::before {
 /* 将对号去掉 */
 content: ''; 
 /*实心圆圈的大小*/
 width: 18rpx;
 height: 18rpx;
 /*将圆角设置成50%才是一个圆*/
 border-radius: 50%;
 /*圆圈颜色*/
 background-color: #419dea;
}

现在的效果

好了，变身完成！