Question

我尝试在自定义复选框（span:after）中垂直/水平居中CSS复选标记（span:before），并在所述框的右侧添加1em边距，但是我试过没有达到预期的效果。

CSS：

form label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
form label:not(:last-child) {
  padding-right: 60px;
}
form input[type="checkbox"] {
  display: none;
}
form input[type="checkbox"] + span:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2ex;
  width: 2ex;
  background-color: white;
  border: 1px solid grey;
  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.3);
  margin-right: 3em;
}
form input[type="checkbox"]:checked + span {
  position: relative;
  cursor: pointer;
}
form input[type="checkbox"]:checked + span:after {
  content: "";
  position: absolute;
  width: 1.2ex;
  height: 0.4ex;
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
  left: 0.4ex;
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

演示：CodePen

谢谢！

Answer 1

请参阅this fiddle。

form label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
form label:not(:last-child) {
  padding-right: 60px;
}
form input[type="checkbox"] {
  display: none;
}
form input[type="checkbox"] + span {
  padding-left: 1em;
}
form input[type="checkbox"] + span:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-120%);
  height: 2ex;
  width: 2ex;
  background-color: white;
  border: 1px solid grey;
  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.3);
  margin-right: 3em;
}
form input[type="checkbox"]:checked + span {
  position: relative;
  cursor: pointer;
  display: flex;
}
form input[type="checkbox"]:checked + span:after {
  content: "";
  position: absolute;
  width: 1.2ex;
  height: 0.4ex;
  background: transparent;
  top: 30%;
  transform: translateY(-250%);
  left: -0.1ex;
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

Answer 2

这是您可能正在寻找的Link to jsfiddle

<强>更改

我在代码中更改了以下内容

1-在right: -30px;

中设置form label{...}

2-在top: 30%;

中设置form input[type="checkbox"]:checked + span:after{...}

3-在left: -18px;

中设置form input[type="checkbox"]:checked + span:after{...}

4-在left: -20px;

中设置form input[type="checkbox"] + span:before {...}

你也可以在这里测试一下。

form label {
  display: inline-block;
  position: relative;
  right: -30px;
  cursor: pointer;
}
form label:not(:last-child) {
  padding-right: 60px;
}
form input[type="checkbox"] {
  display: none;
}
form input[type="checkbox"] + span:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2ex;
  width: 2ex;
  background-color: white;
  border: 1px solid grey;
  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.3);
  margin-right: 3em;
  left: -20px;
  
}
form input[type="checkbox"]:checked + span {
  position: relative;
  cursor: pointer;
}
form input[type="checkbox"]:checked + span:after {
  content: "";
  position: absolute;
  width: 1.2ex;
  height: 0.4ex;
  background: transparent;
  top: 30%;
  transform: translateY(-50%);
  left: -18px;
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

<form action="/" method="post">
  <label>
<input type="checkbox" name="search-site-filter" value="option1" required>
<span>Checkbox label</span>
  </label>
</form>

Answer 3

您可以将复选框的不透明度设置为0而不是display: none，将伪元素设置为left: 0并将余量设置为input：

form label {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
form label:not(:last-child) {
  padding-right: 60px;
}
form input[type="checkbox"] {
  opacity: 0;
  margin-right: 1em;
}
form input[type="checkbox"] + span:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 2ex;
  width: 2ex;
  background-color: white;
  border: 1px solid grey;
  box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.3);
  /* margin-right: 3em; */
}
form input[type="checkbox"]:checked + span {
  cursor: pointer;
}
form input[type="checkbox"]:checked + span:after {
  content: "";
  position: absolute;
  width: 1.2ex;
  height: 0.4ex;
  background: transparent;
  top: 30%;
  transform: translateY(-50%);
  left: 0.4ex;
  border: 3px solid blue;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}

<form action="/" method="post">
  <label>
    <input type="checkbox" name="search-site-filter" value="option1" required>
    <span>Checkbox label</span>
  </label>
</form>

居中自定义复选框

3 个答案: