微信小程序中，默认样式为：
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);
}
