uni-app 把checkbox修改样式为圆形,并修改选中颜色及选中图标

实现:

<style scoped>
    /* 复选框未选中前的样式 */
    /deep/ .uni-checkbox-input {
        width: 36upx;
        height: 36upx;
        border-radius: 50%;
        margin-right: 0;
        border: 1px solid #888888;
    }

    /* 复选框取消默认样式 */
    /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked:before {
        font: normal normal normal 14px/1 uni;
        content: "EA08";
        font-size: 0; /* 重点使用这一步取消的默认样式 */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-48%) scale(1);
        -webkit-transform: translate(-50%,-48%) scale(1);
    }

    /* 重新定义复选框选中后的样式*/
    /deep/ .uni-checkbox-input-checked::before {
        width: 19px;
        height: 19px;
        background: #ff0000;
        border-radius: 50%;
        /* background: url(../../static/img/seal.png) no-repeat center; */ //选中图标
    }
</style>

猜你喜欢

转载自blog.csdn.net/weixin_40841731/article/details/129336958
今日推荐