带有单选按钮的纯 CSS hide/show：parent/descendant 问题？

Question

我正在尝试用 radio 按钮做一个纯粹的 css Show/Hide。
正如下面的代码片段所示，它就像一个魅力。

.refusal,
.acceptance {
  display: none;
}

input#refusal:checked~.refusal {
  display: block;
}

input#acceptance:checked~.acceptance {
  display: block;
}

This example works!</br>
<input type="radio" id="refusal" name="status" value="declined">
<label for="refusal">NO</label>

<input type="radio" id="acceptance" name="status" value="accepted">
<label for="acceptance">YES</label>

<form class="refusal">Something for REFUSAL</form>
<form class="acceptance">Something for ACCEPTANCE</form>

问题是我想像这样修改我的 html input/label:

 <label>
    <input type="radio" id="refusal" name="status" value="declined">
 NO</label>

但是，如果我这样做，我的代码片段将不再起作用（我猜是 css 选择器问题）。
但我不知道如何让它发挥作用。谢谢。

Answer 1

当您将输入放在标签元素中时，您更改了它所在的级别，因此波浪号 (~) 选择器不起作用。如果您确实需要将输入放在标签元素内，则需要使用 js。

带有单选按钮的纯 CSS hide/show：parent/descendant 问题？

Pure CSS hide/show with radio button: a parent/descendant problem?

html

css

css-selectors

show-hide