更改小程序原生radio的颜色及大小

 方式一：

<template>
 <view class="content1">
      <radio-group @change='change1' class="radio_css">
        <radio value="2" disabled="{
   {title=='bianji'}}" checked="{
   {customerLevel==2}}"><text class="{
   {customerLevel==2?'red':''}}"> A级-重要客户</text></radio>
        <radio value="3" disabled="{
   {title=='bianji'}}" class="radio2_css" checked="{
   {customerLevel==3}}"><text class="{
   {customerLevel==3?'red':''}}">B级-次重要客户</text></radio>
        <radio value="4" disabled="{
   {title=='bianji'}}" class="radio2_css" checked="{
   {customerLevel==4}}"><text class="{
   {customerLevel==4?'red':''}}">C级-普通客户</text></radio>

      </radio-group>
</template>

注意style 后面没有scoped
<style lang="less">
radio-group text {
  font-size: 25rpx;
  // color: #666666;
}
radio .wx-radio-input {
  border-radius: 50%; /* 圆角 */
  width: 24rpx;
  border: 2rpx solid #5e5e5f;
  height: 24rpx;
}
radio .wx-radio-input.wx-radio-input-checked {
  border: none;
  background: red;
}
radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%; /* 圆角 */
  width: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  height: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 28rpx;
  text-align: center;
  font-size: 20rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: red;
  transform: translate(-50%, -50%) scale(1);
}

/*checkbox 整体大小  */
checkbox {
  // width: 200rpx;
  // height: 80rpx;
}
/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #5e5e5f;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: #e83232;
  border: 2rpx solid #e83232;
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
</style>

方式二：

 

<template>
 <view class="content1">
      <radio-group @change='change1' class="radio_css">
        <radio value="2" disabled="{
   {title=='bianji'}}" checked="{
   {customerLevel==2}}"><text class="{
   {customerLevel==2?'red':''}}"> A级-重要客户</text></radio>
        <radio value="3" disabled="{
   {title=='bianji'}}" class="radio2_css" checked="{
   {customerLevel==3}}"><text class="{
   {customerLevel==3?'red':''}}">B级-次重要客户</text></radio>
        <radio value="4" disabled="{
   {title=='bianji'}}" class="radio2_css" checked="{
   {customerLevel==4}}"><text class="{
   {customerLevel==4?'red':''}}">C级-普通客户</text></radio>

      </radio-group>
</template>

注意style 后面没有scoped
<style lang="less">
radio-group text {
  font-size: 25rpx;
  // color: #666666;
}
radio .wx-radio-input {
  border-radius: 50%; /* 圆角 */
  width: 24rpx;
  border: 2rpx solid #5e5e5f;
  height: 24rpx;
}
radio .wx-radio-input.wx-radio-input-checked {
  border: none;
  background: red;
}
radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%; /* 圆角 */
  width: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  height: 28rpx; /* 选中后对勾大小，不要超过背景的尺寸 */
  line-height: 28rpx;
  text-align: center;
  font-size: 20rpx; /* 对勾大小 30rpx */
  color: #fff; /* 对勾颜色 白色 */
  background: red;
  transform: translate(-50%, -50%) scale(1);
}

/*checkbox 整体大小  */
checkbox {
  // width: 200rpx;
  // height: 80rpx;
}
/*checkbox 选项框大小  */
checkbox .wx-checkbox-input {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #5e5e5f;
}
/*checkbox选中后样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
 border: 4rpx solid red !important; /* 外圈边框，选中状态颜色*/
  background-color: white !important; /* 外圈边框与内圈实心圆间的内容的颜色，不设置就默认是上面的绿色*/
}
/*checkbox选中后图标样式  */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 60%;
  height: 60%;
  background: red; /* 内圈实心圆选中状态颜色*/
  border-radius: 50%;
  content: ''; /* 隐藏️*/
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}
</style>