微信小程式修改radio樣式

在開發小程式的時候，使用一些小程式自己提供的元件，感覺有和ul設計的不一樣，這樣讓我們修改很通過，尤其是radio元件，checkbox元件。我們怎麼去修改這樣的樣式。

小城預設樣式

• 使用小程式的radio元件

<radio-group name="sex"   class="form-radio_wrap">
                    <label>
                        <radio  value="男" checked="{{sex == '男'}}" />男</label>
                    <label class="form-radio">
                        <radio value="女" checked="{{sex == '女'}}" />女</label>
                </radio-group>           

修改樣式

.form-group .form-radio_wrap radio .wx-radio-input {
  height: 24rpx;
  width: 24rpx;
  border-radius: 50%;
  border: 2rpx solid #e6c171;
  background: transparent;
}

.form-group .form-radio_wrap radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%; /* 圓角 */
  width: 18rpx; /* 選中後對勾大小，不要超過背景的尺寸 */
  height: 18rpx; /* 選中後對勾大小，不要超過背景的尺寸 */
  line-height: 18rpx;
  text-align: center;
  font-size: 0rpx; /* 對勾大小 30rpx */
  color: transparent; /* 對勾顔色 白色 */
  background: #e6c171;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}           

• 最終呈現效果,然後自己可以在修改細節問題

• 如果是多選框的話，隻需要把

  radio

  修改成

  checkbox

  就行