html - CSS:自定义复选框不起作用

Question

我有一个基本的自定义复选框，我需要该框在单击该框时将状态更改为已选中，但它不起作用。有人可以帮我找出问题吗？

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

input[type=checkbox] + .accord-text:before {
  display: block;
  content: "☐";
  width: 30px;
  height: 30px;
  color: green;
}

input[type=checkbox]:checked + .accord-text:before {
  content: "☑";
}

<lable for='product-45-45'>
  <input type='checkbox' style="float:right;"/>
  <div class="accord-text">
    <strong>header:</strong> sub text
    <strong>more text!</strong>
  </div>
</lable>

Answer 1

您必须链接您的标签(请注意它拼错了lable)for 与input id 让它工作 - 请看下面的演示:

input[type=checkbox] {
  display: none;
}
input[type=checkbox] + .accord-text:before {
  display: block;
  content: "☐";
  width: 30px;
  height: 30px;
  color: green;
}
input[type=checkbox]:checked + .accord-text:before {
  content: "☑";
}

<label for='product-45-45'>
  <input type='checkbox' style="float:right;" id='product-45-45'/>
  <div class="accord-text">
    <strong>header:</strong> sub text
    <strong>more text!</strong>
  </div>
</label>