如何使复选框黑客与目标div中的输入一起工作[重复]答案

【问题标题】：how to make the checkbox hack work with input within the target div [duplicate]如何使复选框黑客与目标div中的输入一起工作[重复]
【发布时间】：2023-03-08 11:20:01
【问题描述】：

这是我的html：

<div id="blabla" class="control-me">
  <label for="toggle">the label</label>
  <input type="checkbox" id="toggle">
</div>

还有我的 CSS ：

.control-me {
  border: #222222;
  background-color: aqua;
}

#toggle:checked ~ .control-me {
  border: #cd0a0a;
  background-color: #cd0a0a;
}

#toggle {
  opacity: 100;
}

这是基于the checkbox hack 并在jsFiddle 中巧妙地总结出来的。

当我选中复选框时，我希望 div 会从浅绿色变为红色，但事实并非如此。

为什么以及如何让它发挥作用？

我被自动指向this question，但我什至不明白为什么，所以我又问了同样的问题。

【问题讨论】：

您不能为 CSS 选择器的父级设置样式。您可以通过更改 DOM 中复选框元素的位置来实现此目的，然后使用 CSS 将其定位在您希望它出现的位置。或者，您可以在选中复选框时使用 JavaScript 更改父元素 css。

标签： html css checkbox

【解决方案1】：

您的代码不起作用，因为您尝试访问父级而不是兄弟级。

.control-me {
  border: #222222;
  background-color: aqua;
}

#toggle:checked~.control-me {
  border: #cd0a0a;
  background-color: #cd0a0a;
}

#toggle {
  opacity: 100;
}

<div>
  <input type="checkbox" id="toggle">
  <div id="blabla" class="control-me">
    <label for="toggle">the label</label>
  </div>
</div>

您可能无法单独使用 CSS 访问父级，因此最好只更改复选框的位置以使其对兄弟级起作用。尽管您推荐的the question 有很多选择，但您可以按照您提到的博客使用这种方法。

【讨论】：

好吧，非常感谢 - 那时已经采用了 javascript。