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

Question

I'm trying to do a pure css Show/Hide with radio button.
As seen in below snippet, it works like a charm.

.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>

The problem is I want to modify my html input/label like this:

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

However, if I do so, my snippet doesn't work any more (a css selector problem I guess).
But I don't know how to make it work. Thanks.

Answer 1

When you put the input inside a label element you change the level which it resides, so the tilde(~) selector does not work. If you really need the input to be inside a label element you need to use js.