时间戳

首页 > 解决方案 > 如何使复选框hack与目标div中的输入一起使用

html - 如何使复选框hack与目标div中的输入一起使用

问题描述

这是我的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;
}

这是基于复选框 hack并在jsFiddle中巧妙地总结。

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

为什么以及如何使其工作？

我被自动指出了这个问题，但我什至不明白为什么，所以我再次问同样的问题。

标签： htmlcsscheckbox

解决方案

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

.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 访问父级，因此最好仅更改复选框的位置以使其在兄弟级上工作。尽管您提出的问题有很多选择，但您可以根据您提到的博客使用这种方法。

推荐阅读