微信小程序修改radio内部样式

微信小程序中,默认样式为:


image.png

但是有时我们需要它的中间是个圆


image.png

首先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);
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容