checkboxをカスタマイズしたい

html

<div class="checkBox">
    <input type="checkbox" id="hoge">
    <label for="hoge">
        ラベル
    </label>
</div>

SCSS

.checkbox {

    & input[type='checkbox'] {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        position: relative;
        cursor: pointer;

        appearance: none;
        outline: none;

        width: 20px;
        height: 20px;
        margin: 0;

    }

    // チェックボックスのデザイン
    & input[type='checkbox']::before {
        display: inline-block;
        content: '';
        width: 20px;
        height: 20px;
        background: #fff;
        border: solid 1px $gray-400;
        border-radius: 3px;
        margin: 0;
    }

    // チェックマークのデザイン
    & input[type='checkbox']::after {
        display: inline-block;
        content: '';
        position: absolute;
        left: 7px;
        top: 0px;

        width: 8px;
        height: 16px;
        border-right: 3px solid $main;
        border-bottom: 3px solid $main;
        transform: rotate(45deg);

        // チェックしてないときは隠す
        opacity: 0;
    }

    // チェックするとチェックマークの透明化を解除
    & input[type='checkbox']:checked::after {
        opacity: 1;
    }

    & label {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;

        line-height: 20px;
        height: 20px;
        margin: 0;
        // margin-left: 4px;
    }
}