小程序如何改变radio样式？

小程序改变radio样式方法总结：

方法一：

直接通过修改radio样式实现
wxss:

radio {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}

radio .wx-radio-input {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background: none;
  border-radius: 6rpx;
  box-sizing: border-box;
}

radio .wx-radio-input.wx-radio-input-checked {
  background-color:transparent;
  border-color:#FF2150;
  overflow: hidden;
  box-sizing: border-box;
}

radio .wx-radio-input.wx-radio-input-checked::before {
  
}

wxml:

  name1
  name2
  name3

方法二：

通过为radio添加父级元素

/* wxml部分 */

  
    
    {{item.name}}
  


/* js部分 */
data = {
  items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'TUR', name: '法国'},
    ],
}
radioChange(e){
    var item = this.data.items;
    for(var i = 0; i < item.length; i++){
      item[i].checked = item[i].value == e.detail.value;
    }
    this.setData({
      items: item
    })
}

/* wxss部分 */
.radio{
  position: relative;
}
.radio radio{
  opacity: 0;
  position: absolute;
}
.radio-icon{
  display: inline-block;
  width:10px;
  height: 10px;
  border:1px solid #ccc;
}
.radio.active .radio-icon{
   border-color: red;
   background-color: red;
}