改變小程式的radio 原生樣式，與checkbox 不同

再複選的時候可以用

checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    background: red
}

來改變複選框選中的背景色
但是在單選radio 的的時候

radio .wx-radio-input.wx-radio-input-checked{
   border: none;
   background: #f00; 
}

背景無效，嘗試很多方法，只有在wxml，中來設定color才有效

<!-- radiogroup 佈局 -->
 

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

radio .wx-radio-input.wx-radio-input-checked 無效帶來的麻煩很多，改變顏色只是其中一個，那麼要實現下圖效果怎麼辦呢

2、中間圓點可以用radio .wx-radio-input.wx-radio-input-checked::before 來實現

radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50%;
   width: 20rpx; 
   height: 20rpx; 
   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: 40rpx;/* 最好是4的倍數，不然會不在中間 */
  height: 40rpx;
  border: 2rpx solid #666;/* 設定邊框（外圓） */
  font-size: 0;/* 讓邊框重合 */
}
radio .wx-radio-input{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx; 
   border: none;/* 替換邊框（隱藏原有邊框） */
}

邊框重合，再選中的時候預設邊框會消失(變成背景色白色)，所以要設定一個邊框替換原有邊框
4的倍數，避免奇數畫素的時候一畫素無法分配（沒有居中）。