skip to content

CSS Checkbox Hack

The "Checkbox Hack" is the method of using a connected checkbox and label to control one or more elements.

The markup might look something along these lines:

<label for="toggleButtonInput">Show/Hide</label>
<input type="checkbox" id="toggleButtonInput">
<div id="control">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

And the accompanying CSS like this:

input[type="checkbox"] {
   display: none;
   position: absolute;
   top: -9999px;
   left: -9999px;
}

#control {
   display: none;
}

input[type=checkbox]:checked ~ #control {
   display: block;
}

Try it out

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Accessibility

This "hack" has its drawbacks however. It's in no way accessible. This flaw can be improved upon, however, not fixed entirely:

<label id="toggleButton" for="toggleButtonInput" style="cursor: pointer;">
    <button id="ToggleAccessibility">Show/Hide 👀</button>
</label>

Make sure you can still click the label

#toggleButton button {
    pointer-events: none;
}

This makes the toggle button "tabbable", but not "clickable". You'd have to control that with external javascript.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Example

See the Pen Tabs (checkbox-hack) by Tristan White (@triss90) on CodePen.

More Examples: