uni-app はチェックボックスのスタイルを円に変更し、選択された色と選択されたアイコンを変更します。

成し遂げる:

<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
おすすめ