Question

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

＆＃13;

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: "☑";
}

＆＃13;

<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>

＆＃13;

Answer 1

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

您使用拼写错误的HTML代码。

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

您忘记将id添加到与input相关联的label元素。

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>

Answer 2

您必须使用{{1} 链接 label（请注意，它是错误的标签） } id 让它工作 - 见下面的演示：

＆＃13;

input

＆＃13;

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: "☑";
}

＆＃13;

CSS：自定义复选框无效

2 个答案: