CSS:带边框的复选框。如何获得边框和内容之间的空间?

我有一个复选框:

<div class="row margin-top-15">
    <div class="col-md-12">
        <div class="checkbox_square">
            <input id="check_password_show" type="checkbox" value=""></input>
            <label for="check_password_show"></label>
        </div>
        <p th:text="#{label.common_password_show}"></p>
    </div>
</div>

我创建了一个自定义复选框样式:

input[type=checkbox] {
    visibility: hidden;
}

.checkbox_square {
    position: relative;
}

.checkbox_square label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0px;
    border-radius: 3px;
    border: 2px solid var(--textcolorsecundary);
}

.checkbox_square label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--diagramGreenColor);
    border-radius: 3px;
    border: 2px solid var(--primaryColor);
}

.checkbox_square label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.checkbox_square input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

现在看起来像是未选中的:

以及选定的:

所选状态与我想要的状态略有不同。我希望它看起来像:

所以我需要的是绿色背景和蓝色边界之间的一些空间。这有可能吗?

我试图创建一个 jsFiddle 以显示我的复选框,但正如您所见,该复选框在jsFiddle中根本没有显示。它在我的IDE和浏览器中运行良好。