【微信小程序】自定义radio的默认样式和图标

落日映苍穹つ 2022-11-09 00:56 496阅读 0赞

注意：

[components使用radio原生组件修改样式无效][components_radio]

代码片段：

/*radio未选中时样式 */
    radio .wx-radio-input{ 
      width: 44rpx;
      height: 44rpx;
      border: 2rpx solid #969696;
      box-sizing: border-box;
      margin-right: 18rpx;
    }
     
    /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
    radio .wx-radio-input.wx-radio-input-checked { 
      background-color: #fff;
    }
     
    /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
    radio .wx-radio-input.wx-radio-input-checked::before { 
      /* 去除对号 */
      content: '';
      width: 36rpx;
      height: 36rpx;
      border-radius: 50%;
      background-color: #46a0f0;
    }

<radio-group bindchange="choose">
    	
        <radio value="xxx">
          <view>xxx</view>
        </radio>
        
        <radio disabled="{ {true}}" value="xxxx">
          <view>xxxx</view>
        </radio>
    </radio-group>

效果图：  
![在这里插入图片描述][20210314103645507.png]  
使用了radio-group和radio后，就不能用dataset了，如果想获取选中元素的其他属性值，那么可以放在value中然后用 “-” 隔开，在js里再进行获取即可。

[components_radio]: https://developers.weixin.qq.com/community/develop/doc/000a6ea63249608f90baa338058400?highLine=%25E8%2587%25AA%25E5%25AE%259A%25E4%25B9%2589radio
[20210314103645507.png]: /images/20221023/008a605328af48108c6caa36c9ef2f34.png

发表评论取消回复

表情：

评论列表（有 0 条评论，496人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序修改radio样式

案例：页面代码![在这里插入图片描述][4210c2d9559c4061ab2971588a3a4456.png] 样式如下： (前）![改前][415288a

「爱情、让人受尽委屈。」/ 2024年04月07日 10:25/ 0 赞/ 90 阅读

相关微信小程序修改radio的默认样式和图标

/ 选中后的背景样式 / radio .wx-radio-input.wx-radio-input-checked { border-color:

- 日理万妓/ 2023年06月18日 15:55/ 0 赞/ 33 阅读

相关小程序修改默认的radio样式

1、wxml： <radio-group class="radio-group" bindchange="radioChange"> <vie

不念不忘少年蓝@/ 2022年11月22日 10:13/ 0 赞/ 244 阅读

相关【微信小程序】自定义radio的默认样式和图标

注意： [components使用radio原生组件修改样式无效][components_radio] 代码片段： /radio未选中时样式 / radi

落日映苍穹つ/ 2022年11月09日 00:56/ 0 赞/ 497 阅读

相关微信小程序-自定义placeholder颜色和样式

自定义placeholder颜色和样式如图，这是微信小程序input组件的官方文档描述，下图红框里的`placeholder-style`和`placeholder-c

骑猪看日落/ 2022年05月21日 06:12/ 0 赞/ 956 阅读

相关微信小程序placeholder设置自定义样式

<view class="container"> <input placeholder="请输入" placeholder-class="phcolor" /> </vi

墨蓝/ 2022年05月12日 01:20/ 0 赞/ 261 阅读

相关微信小程序-自定义placeholder颜色和样式

一、使用placeholder-style设置样式 placeholder-style相当于在标签的style属性，可直接在标签内设置。用法： <input

￡神魔★判官ぃ/ 2022年04月04日 05:15/ 0 赞/ 2035 阅读

相关微信小程序（14）——自定义按钮样式

微信小程序自带有button按钮，而button按钮中的某些类型也被赋予特殊意义，比如：获取用户信息、意见反馈等。当我们需要用到这些特殊意义的按钮时，有时需要自定义按钮的样

男娘i/ 2022年02月16日 18:06/ 0 赞/ 1578 阅读

相关微信小程序：修改checkbox/radio样式

修改checkbox样式使用mpvue的时候，这里的`checkbox`改成你用在`checkbox`元素上面的类 / 重写 checkbox 样式 /

清疚/ 2022年01月11日 23:59/ 0 赞/ 494 阅读

相关微信小程序——自定义tabbar样式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

矫情吗；*/ 2021年07月26日 01:52/ 0 赞/ 767 阅读