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:

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

In the hack, you hide the checkbox so the end user will never see it, but the label is still visible. When website visitors click on the label, this will still toggle the checkbox value on and off. You can write a selector using the CSS pseudo-class 'checked' to toggle the visibility of the element you want to hide/und-hide.

.navigation {
    &__checkbox {
        display: none;
    }

    &__nav {
      opacity: 0;
      width: 0;
    }

    &__checkbox:checked ~ &__nav {
      opacity: 1;
      width: 100%;
    }
}

In the code above, the checkbox is always hidden and is used just to manage state on the page (on/off).  The nav is initially set to not be shown as it's default state is to render with no opacity or width.  When the user clicks on the label, the checkbox becomes ticked.  When the checkbox is ticked we can then target it using a CSS selector using the 'checked' pseudo-class.  To select the div to control we can also use the adjacent sibling selector.  When this is triggered we can write styles to make the nav visible. When the web site visitor clicks on the label again, the nav will be hidden... simple but really cool.

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