我有以下纯 CSS 表单,应根据单选输入的值显示表单 A 或表单 B :
<div>
<label for="a">A</label>
<input class="trigger" type="radio" id="a" name="formSelector" value="a" />
<div id="a" class="hidden-content">
<!-- Form A -->
A
</div>
<label for="b">B</label>
<input class="trigger" type="radio" id="b" name="formSelector" value="b" />
<div id="b" class="hidden-content">
<!-- Form B -->
B
</div>
</div>
这是相应的CSS代码:
div {
display: flex;
flex-direction: row;
}
.hidden-content {
display: none;
}
.trigger:checked + .hidden-content {
display: block; // Anything other than none
}
当然,只有当每个
trigger
是要显示的hidden-content
的相邻兄弟时,这才有效。
我想知道是否可以使其工作,仅使用CSS,即使
trigger
和hidden-content
不相邻。
我想象像下面的CSS这样的东西可能存在,
$
是兄弟姐妹的公共类,但没有指定它(一种模式匹配)。
.hidden-content {
display: none;
}
$.trigger:checked ~ $.hidden-content {
display: flex;
}
我更喜欢这样做,因为我有一个弹性布局,应该在第一行中显示单选和标签,并在后续行中显示所显示表单(A 或 B)的内容。 我可能会以错误的方式解决这个问题,请随意提出任何替代方案,顺便说一句,也欢迎解决此问题的任何解决方案:)
trigger
和 hidden-content
作为相邻的兄弟姐妹,如果使用相应的 CSS 属性手动正确设置 order
,则可以工作,但我担心这将很难维护。#hidden-content-a, #hidden-content-b {
display: none;
}
#trigger-a:checked ~ #hidden-content-a {
display: block; // Anything other than none
}
#trigger-b:checked ~ #hidden-content-b {
display: block; // Anything other than none
}
您可以使用
:has()
选择器:
.hidden-content{
display: none;
}
:root:has(.trigger:checked) .hidden-content {
display: block;
}
<div>
<div>
<div>
<label><input type='checkbox' class='trigger'>show content</label>
</div>
</div>
</div>
<div>
<div>
<div class="hidden-content">Secret...</div>
</div>
</div>