微信小程序——修改radio组件的大小

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

原创最新推荐文章于 2025-06-20 23:44:18 发布 · 2.2w 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

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

2 篇文章

订阅专栏

本文介绍了一种解决radio组件样式过大问题的方法。通过设置transform:scale属性可以有效地调整radio组件的大小，使其与周围文字元素更好地匹配。

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

radio组件的样式大小太大了，和我的文字大小不匹配，看起来很难看
这里写图片描述
于是给radio设置了width和 height ，然而并不起作用

最后是使用transform:scale(0.7); 完美解决问题
这里写图片描述

.wxml

<radio-group>
    <radio color="red" checked="false">
    </radio>
    <text>我已阅读并同意</text>
    <text class="red">《快件契约条款》</text>
</radio-group>

.less

radio-group {
    margin-left: 40rpx;
    radio {
      transform:scale(0.7);
    }
    text {
      font-size: 11pt;
      color:#666666;
      &.red {
        color: #CC3244;
      }
    }
}