小程序的radio样式不能自定义吗？

Question

如图，这个勾我想改成实色的，不需要勾，并且要把绿色换掉，试了下好像不行，把微信提供的公共css都去掉了，class也去掉了都不行。。难道就不能改吗？

Answer 1

我以前用的时候记得:checked选择符是没用的，我是直接用display:none隐藏掉，然后用新标签做的

<radio-group bindchange="radioChange"> 
<label class="ui-radio {{item.checked==true?'active':''}}" wx:for="{{items}}>
                    <radio value="{{item.value}}" checked="{{item.checked}}"></radio>
                    <text class="text">{{item.name}}</text>
                </label>
</radio-group>

.ui-radio radio,.ui-radio checkbox {
  display: none;
}
.ui-radio .text {
/*设计样式*/
}
.ui-radio.checked .text {
/*设计样式*/
}

Page({
  data: {
    items: [
      {value: 'USA', name: '美国'},
      {value: 'CHN', name: '中国', checked: 'true'},
      {value: 'BRA', name: '巴西'},
      {value: 'JPN', name: '日本'},
      {value: 'ENG', name: '英国'},
      {value: 'FRA', name: '法国'},
    ]
  },
  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)

    var items = this.data.items;
    for (var i = 0, len = items.length; i < len; ++i) {
      items[i].checked = items[i].value == e.detail.value
    }

    this.setData({
      items: items
    });
  }
})

Answer 2

最简单的方式是找到 radio 样式的选择器，直接隐藏之：

<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio" wx:for="{{items}}">
    <radio value="{{item.name}}" checked="{{item.checked}}" class="wx-radio"/>{{item.value}}
  </label>
</radio-group>

radio .wx-radio-input {
  display: none;
}
.wx-radio {
  /* 需要的默认样式 */
}
.wx-radio[checked] {
  /* 选中的样式 */
}

坑爹的是 .wx-radio-input 这个元素在小程序开发者工具里看不到，所以很多人不知道。同理， .wx-checkbox-input 对应的是 checkbox 的选择器。小程序中 radio 的样式不是做在 radio 上的，而是做在 .wx-radio-input 这个元素上。

Answer 3

把 radio 元素隐藏, 宽度设为 0, 切两张图片或者 svg，用 label 元素的 background 属性自定义 radio.