Custom checkboxes move slightly when selected

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>

Here's the result:

And here's what happens if I select it:

What am I doing wrong?

Answer 1

To fix the "moving" you need to:

• set vertical-align: some value in label::before I have choose bottom.

And to align the "✔" (in case it doesn't - snippet isn't), you need to:

• add text-align:center and line-height:22px (same as the height) in :checked+label::before

Also I removed duplicated properties, not necessary

Note: you're missing the for attribute in label to match id in input, otherwise you can't click in the pseudo checkbox, only in the 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>