微信小程序——修改radio与checkbox默认样式

checkbox

checkbox .wx-checkbox-input{
    border-radius:50%;
    width:20px;
    height:20px;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    border-color:#F0302F !important;
    background:#F0302F !important;
}
checkbox .wx-checkbox-input.wx-checkbox-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

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

以上是原始css,如需修改大小之类的可以根据原css调整

参考:小程序更改checkbox和radio默认样式

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容