Using HTML Input for state

It has long bugged me that some interactive elements require JavaScript to work.

  • If you defer JavaScript until the end as you should be there may well be a delay before elements start working
  • If you accidentally push broken code your interactive elements stop working completely. And if that’s a menu for example, your users are screwed
  • A lot of these interactive elements use 3rd party libraries which are very heavy, jQuery for example. In a world where mobile device browser share is huge page weight is important

With the ever diminishing share of Internet Explorer 6, 7 and 8 users we can now start making use of more advanced CSS selectors to perform this task.

:checked – To determine which form element is currently checked
:nth-child & :nth-of-type – To link the currently checked element to the correct item
~ – The sibling selector to make sure we only select the siblings of the checked item so if elements are nested we don’t get conflicts

In it’s simplest form the implementation looks something like this…

See the Pen Responsive Tabs/Accordion by Paul Hawxby (@phawxby) on CodePen.11065

Of course this isn’t what form elements were originally intended to do so there may well be some concerns, most likely around accessibility but I believe these can be addressed with good use of ARIA attributes so do make use of them.

And now on to a few examples.

Responsive accordion / tabs

See the Pen Responsive Tabs/Accordion by Paul Hawxby (@phawxby) on CodePen.11065

CSS Animation Control

See the Pen CSS Animation with JS free control by Paul Hawxby (@phawxby) on CodePen.11065

Menu Control

See the Pen Circle Menu With CSS3 (Pure CSS version) by Paul Hawxby (@phawxby) on CodePen.11065