I am having trouble using the checkbox hack

Link to the code: Codepen
I am creating a navbar that comes into view when the checkbox is checked. Since it didn’t work, for testing purposes I tried changing the background of the body with it but that didn’t work too. What is the error in the code>


If you have this

input[type="checkbox"]:checked body {
	background-color: #000;

This is the HTML structure you think exists.

<input type="checkbox">

It does indeed work. Try changing the selector to this

input[type="checkbox"]:checked + label {
	background-color: #000;

Which assumes the structure you have in your codepen (label being an adjacent sibling to the input). Doesn’t look good but you can clearly see the background toggling.


If you are intending to show the nav when the hamburger is clicked then the html for the nav must follow as a sibling after the input.


<input type="checkbox" id="toggle">
<label class="hamburger" for="toggle">
	<div class="burger one"></div>
	<div class="burger two"></div>
	<div class="burger three"></div>
<nav class="nav">test</nav>

Then you’d show it like this:

input[type="checkbox"]:checked ~ .nav{

Note that the checkbox hack fails in older webkit and android.

1 Like

Though I used the body selector just to test if the change in the background was happening, but is there a way that I can reference the body?

No the body can’t be sibling after the input. Not in valid html anyway.

Perhaps if you can explain why you feel you need to change the body we may be able to offer an alternative but as Sam said the body can’t be a sibling for the checkbox hack.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.