What Is The 'Checkbox' Hack?

In this guide, you will learn what the CSS "Checkbox Hack" is and how you can use it to create cool CSS effects rather than having to use Javascript.

What Is The 'Checkbox' Hack?

The checkbox hack is a useful technique when you want to toggle something on or off.  Popular usages of the checkbox hack include making a nav appear/hide, or, CSS only pop-up modals. When the checkbox is on the modal displays, when it is off the modal is hidden.

To get started with a "Checkbox Hack", in your HTML you define a checkbox, associated item label and an element you want to control. FOr example:

 <input class="navigation__checkbox" type="checkbox" id="nav-toggle">
 <label for="nav-toggle" class="navigation__button">Menu</label>
            
 <nav class="nav"> Menu html </nav>

Working Example

If you want to see the checkbox hack in action, download my CSS project and look at the menu example in the natours folder, available here, https://github.com/jondjones/CSS

 

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top