微信小程序--自定义radio单选框默认样式

最新推荐文章于 2025-06-20 23:44:18 发布

小丸仔同学

最新推荐文章于 2025-06-20 23:44:18 发布

阅读量7.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/qq_25174701/article/details/88046366

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了微信小程序中实现分类选择组件的方法，包括使用radio-group元素进行选项展示，以及通过WXSS设置选中和未选中状态的样式。组件允许用户在多个分类中进行选择，并在选中项上显示特定样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

/* 未选中的 背景样式 */
radio .wx-radio-input{ 
    height: 36rpx; 
    width: 36rpx;
    border-radius: 50%;
    background: transparent;
 }
/* 选中后的 背景样式 */
radio .wx-radio-input.wx-radio-input-checked{
   border: none;
}
/* 选中后的 对勾样式 */
radio .wx-radio-input.wx-radio-input-checked::before{
   border-radius: 50%;
   width: 36rpx; 
   height: 36rpx;
   line-height: 36rpx;
   text-align: center;
   font-size:36rpx; 
   color:#fff;
   background: #33c9ff;
   border: 6rpx solid #33c9ff;
}