html - 自定义复选框在选中时会轻微移动

Question

I modified the checkboxes in my project to look more aligned with the rest of the design but I have a problem: whenever selected the label of the checkbox moves slightly.

input[type="checkbox"] {
  display: none !important;
}

input[type="checkbox"]+label:before {
  position: relative;
  content: " ";
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px solid grey;
  top: 4px;
  margin: 0 10px 0 0;
}

input[type="checkbox"]:checked+label:before {
  position: relative;
  content: "✔";
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 1px solid grey;
  top: 4px;
  margin: 0 10px 0 0;
}

<input type="checkbox" />
<label>Click to accept</label>

结果如下:

如果我选择它，会发生以下情况:

我做错了什么？

Answer 1

要解决“移动”问题，您需要:

• 在 label::before 中设置 vertical-align: some value 我选择了 bottom。

要对齐“✔”(以防它不对齐 - 片段不对齐)，您需要:

• 在:checked+label中添加text-align:center和line-height:22px(与height相同)::之前

我还删除了不必要的重复属性

注意:label中缺少for属性来匹配input中的id，否则无法点击伪checkbox，只在label

input[type="checkbox"] {
  display: none !important;
}

input[type="checkbox"]+label::before {
  position: relative;
  content: " ";
  display: inline-block;
  vertical-align: bottom;
  width: 22px;
  height: 22px;
  border: 1px solid grey;
  top: 4px;
  margin: 0 10px 0 0;
}

input[type="checkbox"]:checked+label::before {
  content: "✔";
  text-align: center;
  line-height: 22px;
}

<input id="input" type="checkbox" />
<label for="input">Click to accept</label>