I am currently designing a custom checkbox feature where clicking on the label text will toggle the state and display or hide certain text based on the checkbox state, all achieved solely through CSS. The HTML code I have written for this purpose is as follows:
<input type="checkbox" name="check"> <span class="label-text">Item Two</span>
<div class="elements">
<div class="is_checked">
Checkbox is checked
</div>
<div class="is_not_checked">
Checkbox is not checked
</div>
Although this setup is functional, I am unsatisfied with how the checkbox changes its state when interacting with the text element. Moving the elements out of the label removed this issue but also made it impossible to access the checkbox state. I attempted the following solution without success:
(label > input[type="checkbox"]:checked) ~ .elements .is_not_checked{
display: none;
}
This approach failed to even hide the text. How can one effectively access the state of a hidden checkbox within another element, in this case, a label, using only CSS?