Html 如果选中复选框，则更改标签颜色；如果未选中复选框，则更改标签颜色

我正在尝试创建一个自定义复选框，因为很难设置原生html复选框的样式，所以下面是我尝试过的。单击标签时，复选框处于选中和取消选中状态，但选中和取消选中输入复选框时，我无法更改标签的边框颜色。非常感谢您的任何帮助、想法、建议和建议

input[type=“checkbox”]{display:none；}
标签{
边框：1px纯红；
宽度：15px；
高度：15px；
显示：块；
}
标签+输入：选中{
边框颜色：蓝色；
}

---

由于没有父选择器，因此无法使用该层次结构（没有JavaScript）执行所需操作。您需要将标签移动到复选框之后，然后使用相邻的同级组合符

+

：

input[type=“checkbox”]{
显示：无；
}
标签{
边框：1px纯红；
宽度：15px；
高度：15px；
显示：块；
}
输入：选中+标签{
边框颜色：蓝色；
}

---

由于没有父选择器，因此无法使用该层次结构（没有JavaScript）执行所需操作。您需要将标签移动到复选框之后，然后使用相邻的同级组合符

+

：

input[type=“checkbox”]{
显示：无；
}
标签{
边框：1px纯红；
宽度：15px；
高度：15px；
显示：块；
}
输入：选中+标签{
边框颜色：蓝色；
}

我明白了，我不想使用复选框上的id与标签绑定，因为我打算创建多个复选框，并且为每个复选框创建一个唯一的id是一件令人头疼的事。有没有办法不在标签的复选框上使用id？不要做你想做的事情，因为在使用标签时，唯一的其他选项是用它包装输入元素（就像你最初做的那样），然后你又回到了没有父选择器可用的问题。如果您想将标签与输入一起使用，而不是将其包装，则必须使用id。我明白了，我不想使用复选框上的id与标签绑定，因为我打算创建多个复选框，并且为每个复选框创建一个唯一的id是一件令人头疼的事情。有没有办法不在标签的复选框上使用id？不要做你想做的事情，因为在使用标签时，唯一的其他选项是用它包装输入元素（就像你最初做的那样），然后你又回到了没有父选择器可用的问题。如果您希望将标签与输入一起使用，而不是将其包装，则必须使用ID。