CSS Checkbox Hack

21-08-2019

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

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.

Example

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

More Examples:

• Hide the sidebar! by @genelocklin
• Checkbox hack - popup by Michael Gubitosa