Question

我正在尝试创建自定义复选框的列表，但是在应用样式之后，只有第一个复选框响应按钮单击：

    <!DOCTYPE html>
<html>
<style>
    .style-input {
  display: none;
}

.style-input + label:after {
  content: "";
}

.style-input:checked + label:after {
  content: "";
}
    </style>

<body>
    <div>
        <input id="checkbox" type="checkbox" class='style-input' />
        <label for="checkbox"></label>
    </div>

    <div >
        <input id="checkbox" type="checkbox" class='style-input' />
        <label for="checkbox"></label>
    </div>
</body>

</html>

Answer 1

每个元素的

id必须是唯一的。因此，您需要为两个复选框都赋予唯一的id。但是，如果更改id，则还必须更改for上的label属性以匹配相应复选框的id。

此外，作为一个旁注，我建议您使用转义的unicode来表示字符：

\1F91C表示空白框
\1F44D（竖起大拇指的表情符号）

为将来参考，您可以使用this lookup然后使用HEX值自己转换字符，并将0x替换为\

请参见下面的工作示例：

<!DOCTYPE html>
<html>
<style>
  .style-input {
    display: none;
  }
  
  .style-input+label:after {
    font-size: 25px;
  }
  
  .style-input+label:after {
    content: "\1F91C";
  }
  
  .style-input:checked+label:after {
    content: "\1F44D";
  }
</style>

<body>
  <div>
    <input id="checkbox1" type="checkbox" class='style-input' />
    <label for="checkbox1"></label>
  </div>

  <div>
    <input id="checkbox2" type="checkbox" class='style-input' />
    <label for="checkbox2"></label>
  </div>
</body>

</html>

Answer 2

如果您更改了第二项的ID，它将起作用：

<html>
<style>
    .style-input {
  display: none;
}

.style-input + label:after {
  content: "";
}

.style-input:checked + label:after {
  content: "";
}
    </style>

<body>
    <div>
        <input id="checkbox" type="checkbox" class='style-input' />
        <label for="checkbox"></label>
    </div>

    <div >
        <input id="checkbox2" type="checkbox" class='style-input' />
        <label for="checkbox2"></label>
    </div>
</body>

</html>

Answer 3

每个复选框的ID必须是唯一的，然后它将按预期运行。

自定义复选框列表，仅第一个起作用

3 个答案: