css - 检查输入时选择下一个元素

Question

HTML：

<label>
  <input type="checkbox" />
</label>
<div>
  stuff
</div>

我希望能够根据输入的检查状态设置 DIV 元素的样式，例如

input ~ div{
  display: none;
}

input:checked ~ div{
  display: block;
}

显然~选择器在这里似乎不起作用。也没有+

有没有其他解决方案（除了javascript）？

score 1 · Accepted Answer

遗憾的是，没有办法在纯 CSS 中选择祖先，而这是选择祖先的兄弟姐妹所需要的。

我见过人们用标签围绕其他内容 - 虽然这是一个非常有问题的做法，但它允许您使用+选择器来设置 div 的样式：

<label>
    <input type="checkbox" />

    <div>
      stuff
    </div>
</label>

编辑：

或者这个（感谢@lnrbob 指出）

<label for="myCheckbox">
    This is my label
</label>

<input id="myCheckbox" type="checkbox" />
<div>
    stuff
</div>

score 1 · Accepted Answer

试试这个，我不确定它的跨浏览器兼容性是什么。

input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}

这应该可行，但我不会这样做，我会做 Javascript。

见我的jsfiddle

score 0 · Accepted Answer

如果有人需要额外的解决方案

<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>

<div>
    show when check box is checked
</div>

和CSS

#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }

快乐编码！

3 回答 3