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

叫我小蓝就行了
  • 19

图片描述

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

回复
阅读 8.6k
3 个回答

我以前用的时候记得: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
    });
  }
})
萤火之未
  • 1
新手上路,请多包涵

最简单的方式是找到 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 这个元素上。

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏