微信小程序radio自定义样式

效果图

image.png

radio样式

guanfang

官方文档样式

        
          定值记录
          检查记录
        
      

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);
}