微信小程序Radio的样式改变

微信小程序radio的样式改变

如何修改小程序的样式？如何将一般的样式都是第一张图片的样子改成第二张图片的radio的样式。

1. 将原来的的radio颜色改变

//radio需要放大
.xieyi radio{
  transform: scale(0.7);
}
//背景色改变
.wx radio .wx-radio-input.wx-radio-input-checked {
  background:#42b89e;
}

2.radio变成第二张图片下面我已阅读协议的样式

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
.xieyi radio .wx-radio-input.wx-radio-input-checked {
  /* border-color: #04b06d!important; */
  border: 1rpx solid #42b89e;
   background-color: transparent!important;

}


/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
.xieyi radio .wx-radio-input.wx-radio-input-checked::before {
 content: ''; 
 width: 35rpx;
 height: 35rpx;
 border-radius: 50%;
 background-color: #42b89e;
}

如果需要改颜色，一定要在选中后的 背景样式设置 background-color: transparent!important;