微信小程序:修改单选radio大小样式

1,370 阅读1分钟

通过scale将其缩小

<radio style="transform:scale(0.8)" checked="true" value="true"></radio>

修改样式

/* 未选中的样式 */
radio .wx-radio-input{
    border-radius:50%;
    width:20px;
    height:20px;
}

/* 选中后 背景及勾 的样式 */
radio .wx-radio-input.wx-radio-input-checked{
    border-color:#F0302F !important;
    background:#F0302F !important;
}

radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius:50%;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    font-size:15px;
    color:#fff;
    background:transparent;
    transform:translate(-50%, -50%) scale(1);
    -webkit-transform:translate(-50%, -50%) scale(1);
}

参考
微信小程序修改默认radio大小样式
小程序更改checkbox和radio默认样式