微信小程序中，默認(rèn)樣式為：

image.png

但是有時(shí)我們需要它的中間是個(gè)圓

image.png

<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>

我們主要是對(duì)樣式文件進(jìn)行修改

/* 單選按鈕樣式*/
radio .wx-radio-input {
  width: 40rpx;
  height: 40rpx;
  border: 4rpx solid #8C8C8C;/* 外圈邊框，默認(rèn)灰色，即未選中狀態(tài)*/
  border-radius: 50%;
  background: none;
}
/*單選按鈕選中后內(nèi)部樣式*/
radio .wx-radio-input.wx-radio-input-checked {
  border: 4rpx solid #00A0E9 !important;/* 外圈邊框，選中狀態(tài)顏色*/
  background-color: white !important;/* 外圈邊框與內(nèi)圈實(shí)心圓間的內(nèi)容的顏色，不設(shè)置就默認(rèn)是上面的綠色*/
}
/*單選按鈕選中后內(nèi)部中心*/
radio .wx-radio-input.wx-radio-input-checked::before {
  width: 60%;
  height: 60%;
  background: #00A0E9;/* 內(nèi)圈實(shí)心圓選中狀態(tài)顏色*/
  border-radius: 50%;
  content: '';/* 隱藏??*/
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}