微信小程序 radio选中样式改为实心圆＜转载＞

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

转载最新推荐文章于 2025-06-20 23:44:18 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：https://www.jianshu.com/p/5b64e4f448fe

文章标签：

#前端 #微信小程序

本文详细介绍了如何使用wxml和样式文件修改微信小程序中的radio组件样式，包括未选中和选中状态的边框颜色、背景色以及内部实心圆的颜色等，帮助开发者实现更具个性化的设计。

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

wxml

<radio-group bindchange="radioChange">
  <radio value="是" checked="">
    <text class="radio-text-laebl">是</text>
  </radio>
  <radio value="否" checked="1">
    <text class="radio-text-laebl">否</text>
  </radio>
</radio-group>

样式文件进行修改

/* 单选按钮样式*/
radio .wx-radio-input {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #8C8C8C;/* 外圈边框，默认灰色，即未选中状态*/
  border-radius: 50%;
  background: none;
}
/*单选按钮选中后内部样式*/
radio .wx-radio-input.wx-radio-input-checked {
  border: 4rpx solid #00A0E9 !important;/* 外圈边框，选中状态颜色*/
  background-color: white !important;/* 外圈边框与内圈实心圆间的内容的颜色，不设置就默认是上面的绿色*/
}
/*单选按钮选中后内部中心*/
radio .wx-radio-input.wx-radio-input-checked::before {
  width: 60%;
  height: 60%;
  background: #00A0E9;/* 内圈实心圆选中状态颜色*/
  border-radius: 50%;
  content: '';/* 隐藏✔️*/
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

来自转载:微信小程序修改radio内部样式 - 简书