html - CSS:带边​​框的复选框。如何获得边框和内容之间的空间？

Question

我有一个复选框:

<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 和浏览器中运行良好。

Answer 1

您可以调整.checkbox_square label:after的位置来达到想要的效果。检查以下示例。

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 grey;
}
.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: green;
  border-radius: 3px;
}
.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;
}
.checkbox_square input[type=checkbox]:checked + label {
  border-color: blue;
}

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