小程序中修改radio的样式

效果图： image.png

1、首先选中背景在wxml中设置为白色

<radio-group bindchange="radioChange" >
    <label  wx:for="{{cartArr}}">
        <radio value="{{index}}" color='#fff'></radio>
        <view>{{item.name}}</view>
        <!-- 其他布局代码 -->   
    </label> 
</radio-group>

2、中间圆点可以用radio .wx-radio-input.wx-radio-input-checked::before 来实现

radio .wx-radio-input.wx-radio-input-checked::before{
  border-radius: 50%;
  width: 12rpx;
  height: 12rpx;
  text-align: center;
  font-size:0rpx; /* 对勾大小 去掉 */
  background-color: #00f;
  transform:translate(-50%, -50%) scale(1);
  -webkit-transform:translate(-50%, -50%) scale(1);
}

3、外面的边框

radio{
  border-radius: 50%;
  width: 28rpx;/* 最好是4的倍数，不然会不在中间 */
  height: 28rpx;
  border: 1rpx solid #0394F0;/* 设置边框（外圆） */
  font-size: 0;/* 让边框重合 */
}

radio .wx-radio-input{
   border-radius: 50%;
   width: 28rpx;
   height: 28rpx; 
   border: none;/* 替换边框（隐藏原有边框） */
}

4.边框重合，再选中的时候默认边框会消失(变成背景色白色)，所以要设置一个边框替换原有边框
4的倍数，避免奇数像素的时候一像素无法分配（没有居中）。