Jim Hyland Jim Hyland - 1 month ago 5
CSS Question

Can I have an <input> and <label> with different parent elements?

For example:

<input type="checkbox" id="nav-toggle" />

Nav stuff

<label for="nav-toggle">Menu</label>

For use in an a css only menu panel like this: http://codepen.io/jimahyland/pen/mAVGmj

It seems to work fine, but is there anything fundamentally wrong with this approach?


Yes, input and label can have different parents.

Most standard block-level elements, such body, div, article, section and aside, accept flow content, which includes input and label.

As long as the parent accepts flow content or phrasing content, input and label can exist as a child element.