小程序radio自定义样式

image.png
image.png

WXML

<view class="common-content btn-content">
  <radio-group>
    <label>
      <radio value="1">一档</radio>
    </label>
    <label>
      <radio value="2" class="ml61">二档</radio>
    </label>
    <label>
      <radio value="3" class="ml61">三档</radio>
    </label>
  </radio-group>
</view>

wxss

.radio {
  display: block;
  border: 1px solid linear-gradient(#fcc33b,#f6703f);
  padding: 6rpx;
}
 
radio .wx-radio-input {
  border-radius: 50%;
  width: 28rpx;
  height: 28rpx;
}
 
 
radio .wx-radio-input.wx-radio-input-checked {
  border: 1px solid #f99838 !important;
  background: white;
}
 
 
radio .wx-radio-input.wx-radio-input-checked::before {
  border-radius: 50%;
  width: 24rpx;
  height: 24rpx;
  line-height: 24rpx;
  text-align: center;
  font-size: 0;
  background: linear-gradient(#fcc33b,#f6703f);
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}