如何显示带有标签的复选框？我的代码显示只有标签为什么？

<label for="checkbox">标签</label>
<input type="checkbox" id="checkbox" name="checkbox">

label {
  display: inline-block;
  cursor: pointer;
}

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

input[type="checkbox"] + label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #000;
  margin-right: 5px;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label:before {
  background-color: #000;
}