选中输入时显示div，CSS-only no javascript

Question

我有一个表单，如果有人检查特定输入，我希望它显示div。问题是输入不会与后续div共享同一个父级（并且由于框架原因而不能）。例如：

<div>
    <input id="test" type="radio">
</div>
<div id="ShowIfTestIsChecked">
    <!--content to show if test input is checked-->
</div>

这个CSS几乎可以工作，但是由于我想要显示的div不在输入的父级内部而被打破：

#test ~ #ShowIfTestIsChecked{
    display:none;
}
#test:checked ~ #ShowIfTestIsChecked{
    display:block;
}

我可以使用其他一些CSS技巧来完成这项工作吗？这很容易用javascript做，但我只想用CSS做这件事。

Answer 1

在css中执行此操作需要能够选择父div，然后选择css中不可能的下一个div，您只能在css选择器中选择next或children元素。

为什么要首先将输入包装在div中？

Gimme a sec我将发布一个带有css技巧的更新，它可以按你想要的方式工作，但需要将第一个div元素更改为表单元素。

所以你必须有机会html或我们js。

对于html，您有两个选项，将每个div的内容放在一起或使用表单元素：

<form>
    <input id="trick" type="radio" name="trick" required />
</form>
<div id="ShowIfTestIsChecked">
    Hello world
</div>

#ShowIfTestIsChecked {
    display: none;
}

form:valid ~ #ShowIfTestIsChecked {
    display: block;
}

Answer 2

只需将您的复选框和div放在一起：

<input id="test" type="radio">
<div id="ShowIfTestIsChecked"></div>

#test:checked ~ #ShowIfTestIsChecked {
    display: block;
}

没有其他CSS方式。