CSS：自定义复选框不起作用答案

【问题标题】：CSS: Custom check box not workingCSS：自定义复选框不起作用
【发布时间】：2023-03-05 14:31:01
【问题描述】：

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

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>

【问题讨论】：

jsfiddle.net/9o0csh9u - 在这里工作。固定标签和 id 映射
我自己的，我从一个例子中得到了这个想法，但我已经从这个想法中构建了我自己的
@RahulB 不错的小提琴谢谢 +1

标签： html css checkbox input

【解决方案1】：

在您的代码中进行以下两项更正：

您使用了拼写错误的HTML 标签。

<lable for='product-45-45'>
    ^^^ Check spelling here. Must be <label>

您忘记将id 添加到与label 连接的input 元素。

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' id="product-45-45" style="float:right;"/>
  <div class="accord-text">
    <strong>header:</strong> sub text
    <strong>more text!</strong>
  </div>
</label>

【讨论】：

【解决方案2】：

您必须链接您的label（请注意，有问题的标签拼写错误）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>

【讨论】：