微信小程序 修改radio的样式为环形

在写小程序中难免会想要改变其内置组件的样式问题、接下来通过这篇文章来了解一下如何修改radio的样式问题吧

 wxml

<radio-group>
    <label>1</label>
       <radio></radio>
</radio-group>
<radio-group>
    <label>2</label>
       <radio></radio>
</radio-group>
<radio-group>
    <label>3</label>
      <radio></radio>
</radio-group>

wxss

/* 未选中的样式 */
radio .wx-radio-input {
  width: 27rpx; 
  height: 27rpx;
}
/* 环形的外圈 */
radio .wx-radio-input.wx-radio-input-checked {
  border: 1px solid #5074fe !important;
  background: #fff;
}

/* 选中后 背景及勾 的样式 */
radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%;
  width: 15rpx;
  height: 15rpx;
  line-height: 15rpx;
  text-align: center;
  font-size: 0;
  background: #5074fe;
  transform: translate(-50%, -50%) scale(1);
}

参考其它网络文章