微信小程序radio自定义样式

效果图

image.png

radio样式

guanfang

官方文档样式

<radio-group class="radio-group" bindchange="radioChange">
        <label class="radio">
          <radio value="1" checked="" color='#4891FF'/>定值记录
          <radio value="2" checked="" color='#4891FF'/>检查记录
        </label>
      </radio-group>

wxs样式

/* 未选中的样式 */
radio .wx-radio-input {
    width: 35rpx;
    height: 35rpx;
    border-radius: 50%;     /* 圆角 */
}
/* 选中后 背景及勾 的样式 */
radio .wx-radio-input.wx-radio-input-checked::before {
    width: 35rpx;
    height: 35rpx;
    border-radius: 50%; 
    line-height: 35rpx;
    text-align: center;
    font-size: 30rpx;       /* 勾大小 */
    color: #fff;            /* 白色勾  */
    transform: translate(-50%, -50%) scale(1);
}