I am attempting to utilize a checkbox to control the visibility of a field. The following code is functional, but I would prefer to contain the checkbox and label fields within a paragraph tag for styling purposes such as adding padding.
<input type="checkbox" id="cbx" name="cbx"><label for="cbx">Different drop off location?</label>
<div class="testerclass"><p>Some text here</p></div>
input[type=checkbox] + label {
color:#000000;
font-weight:bold;}
input[type=checkbox]:checked + label ~ .testerclass {
display:inline;}
However, when I enclose it in a paragraph tag, the functionality ceases. It appears that the issue lies in the fact that the checkbox no longer shares the same parent as the div that I wish to show, making it difficult to target the checkbox state with CSS. Can someone offer assistance with this matter? Thank you.
<p class="styletoline"><input type="checkbox" id="cbx" name="cbx"><label for="cbx">Different drop off location?</label>
<div class="testerclass"><p>Some text here</p></div></p>