CSS Is More Powerful Than You Think It Is! — Part 1

Checkbox Hack: A cool trick to make simple toggle interactions without using JavaScript.

Disclaimer: This trick may have serious issues from an accessibility point of view (keyboard navigation, speech synthesis, etc.). I suggest that you not use it if those things are an essential part of the website you are building.

I recently worked on a project for a designer. It was his portfolio website. The design is quite unique in terms of how the navigation works. You may visit the website here.

This wasn’t just another development project. We discussed it and decided to make the navigation interaction purely based on CSS, with no JavaScript, in order to improve the page's performance. This is what we are going to look at in this post.

First, let’s dive a little deeper into the basics of this hack. The three most essential CSS concepts that you need to know for this are the Pseudo-Selectors , Attribute Selectors , and the General Sibling Combinator (or sibling selector in simpler words). These concepts are outside of the scope of this post, so I suggest you learn about them first.

We are going to work with :checked , and :not pseudo-selectors, tilde ~ sibling selector, and for attribute selector in CSS.

Here’s what we are going to build first:

Let’s get the basic markup done:

<input type="checkbox" id="checkbox" hidden>
<label for="checkbox">Toggle Div</label>
<div id="toggle"></div>

The input is hidden because we don’t actually want to show the input itself. Instead, we can use its label because clicking on the label will change the state of the input as well.

It is important that input , label , and the div element that you are going to manipulate based on the state of the input are siblings to each other in the markup to make use of sibling selectors.

Now that we have the markup, let’s dive into the CSS part. For this demo, let’s fix the position of the div that’s going to show/hide and make it full height:

#toggle {
    height: 100vh;
    width: 400px;
    background: red;
    position: fixed;
    top: 0;
}

Now, let’s see how we can toggle this div. I am using position property to put the div out of the viewport to the left and move it based on condition. You can use other effects to show or hide, like opacity. Basically any animatable property can be used.

First, when the checkbox is not checked, the div should be out of the viewport:

#checkbox:not(:checked) ~ #toggle {
    left: -450px;
}

This is simple to understand if you know selectors. We first use :not pseudo selector with :checked pseudo selector to reverse the condition, then select its sibling div with ~ selector.

Now, whatever CSS we write in this block will be applied to the div only when the checkbox is unchecked.

Similarly, for checked state, we simply omit:not pseudo selector:

#checkbox:checked ~ #toggle {
    left: 0;
}

That’s all we need to make the functionality work. You can add transition property to make it animated.

One thing that you might not know is that you can have multiple labels for a single input. It’s not limited to only a single element to toggle the div.

If you have followed along this far and test ited in the browser, you’ll see that there is no way to hide the div, as the label itself goes under the div and is not accessible then.

You may use z-index or move the label, along with the div, based on the state, or something else. It’s better that you play with that to better understand this.

This trick can also be used to build elements like accordions, as well. If you did visit the website I mentioned at the beginning, you might be wondering how I am handling two checkboxes where checking one automatically unchecks the other.

Think about what you have learned so far and what are the other input types that might help us. Do you have your answer now?

Radio Inputs!

Every HTML developer knows how radio inputs work. You set a common name for them and only one of them can be selected at a given time by default.

Using the same concepts above, with the radio input type, is what is being used on the mentioned website. All of the selectors and concepts remain the same, only the HTML changes.

Let’s see an example for that as well. Here’s what we are going to build:

The markup is very similar, with just small changes:

<input type="radio" name="navigation" id="radio1" hidden checked>
<label for="radio1">Toggle Div</label>
<div id="toggle1"></div>
<input type="radio" name="navigation" id="radio2" hidden>
<label for="radio2">Toggle Div</label>
<div id="toggle2"></div>

There are two radio inputs with a similar structure as the previous code. We have kept the first one checked by default. Now we toggle each of them (move in and out of viewport) based on the state of the radio buttons. Here’s the complete CSS:

#toggle1, #toggle2 {
    height: calc(100vh - 50px);
    width: 100vw;
    position: absolute;
    top: 50px;
    transition: all 0.4s ease-in;
}

#toggle1 {
    background-color: red;
}

#toggle2 {
    background-color: green;
}

#radio1:checked ~ #toggle1 {
    left: 0;
}

#radio1:not(:checked) ~ #toggle1 {
    left: -150vw;
}

#radio2:checked ~ #toggle2 {
    left: 0;
}

#radio2:not(:checked) ~ #toggle2 {
    left: 250vw;
}

This should be pretty easy to understand, as we have already discussed everything that’s been used here.

That’s all folks.

That’s how you make interactions with just some simple CSS concepts that people usually do using JS.

I have shown very basic examples here. This trick is useful in a lot of cases. Play around with it and if you make something interesting, do share.

Again, if you would like to see a live example using this trick, visit this website and play around with the navigation, on both desktop and mobile. Both are purely based on this trick.

This post was the first of this series. Next, we are going to look into how we can use :before and :after pseudo elements to create cool effects, add tooltips, as well as make a table properly responsive on mobile devices.

If you have any questions or suggestions, leave them below in the comments section. Follow me to stay updated on this series and learn more CSS tricks that will make you a better CSS developer as well as a better Web Developer.

Cheers.