I'm encountering an obstacle when trying to adjust the alignment of checkboxes in my HTML code.
Here is the structure of my HTML:
<ol id="menutree">
<li>
<label class="menu_label" for="c1">Menu Gen14 Am0a1</label>
<input type="checkbox" id="c1" /> <!-- input must follow label for safari -->
<ol>
<li>
<label for="c2" class="menu_label">Menu Am1a1</label>
<input type="checkbox" id="c2" />
<ol>
<li class="page"><a href="#">Page Ap1a1</a></li>
<li class="page"><a href="#">Page Ap1a2</a></li>
<li class="page"><a href="#">Page Ap1a3</a></li>
</ol>
</li>
<li>
<label for="c3" class="menu_label">Menu Am1b1</label>
<input type="checkbox" id="c3" />
<ol>
<li class="page"><a href="#">Page Ap1b1</a></li>
<li>
<label for="c4" class="menu_label">Menu Am2b1 </label>
<input type="checkbox" id="c4" />
<ol>
<li class="page"><a href="#">Page Ap2b1</a></li>
</ol></li>
</ol></li>
</ol></li>
<li>
<label class="menu_label" for="c5">Menu Bm0a1</label>
<input type="checkbox" id="c5" />
<ol>
<li>
<label for="c6" class="menu_label">Menu Bm1a1</label>
<input type="checkbox" id="c6" />
<ol>
<li class="page"><a href="#">Page Bp1a1</a></li>
</ol>
</li>
<li>
<label for="c7" class="menu_label">Menu Bm1b1</label>
<input type="checkbox" id="c7" />
<ol>
<li class="page"><a href="#">Page Bp1b1</a></li>
<li>
<label for="c8" class="menu_label">Menu Bm2b1</label>
<input type="checkbox" id="c8" />
<ol>
<li class="page"><a href="#">Page Bp2b1</a></li>
</ol></li>
</ol></li>
</ol></li>
</ol>
Furthermore, here is the relevant CSS code:
#menutree li {
list-style: none;
}
li .menu_label + input[type=checkbox] {
opacity: 2;
}
li .menu_label {
cursor: pointer;
}
li .menu_label + input[type=checkbox] + ol > li
{
display: none;
}
li .menu_label + input[type=checkbox]:checked + ol > li
{
display: block;
}
The issue at hand is that the checkboxes are appearing after the labels and I'm seeking a solution to have them displayed before the labels.
If anyone has any insights on how to resolve this matter, your assistance would be greatly appreciated while ensuring the functionality remains intact as previously stated. Thank you.
For reference, here is the link to the jsfiddle: jsfiddle