Awesome Checkbox and Radio-Button CSS Hacks

Hello, today we will explore some CSS hacks that can be used without the need for JavaScript. i will go over 3 awesome hacks and i know you will be amazed by the end of this article. LET’S KEEP THE BALL ROLLIN’

• CSS Menu

First, we will hide the checkbox and the menu container.

.menu--toggle,
.menu--body {
  display: none;
}

Now, the main trick of this Menu is the ~ CSS General Sibling selector. below CSS is used to change .menu--body to display: block when the checkbox is in :checked state.

According to MDN Docs, ~ is:

The general sibling combinator (~) separates two selectors and matches the second element only if it follows the first element (though not necessarily immediately), and both are children of the same parent element.

Below is the trick we will apply using this life-saver:

.menu--toggle:checked ~ .menu--body {
  display: block;
}

Check below pen for the full markup of this hack

https://codepen.io/devHammed/pen/vRbqzB

• CSS Modal

This hack is same with CSS Menu so i am not going to explain this because the only difference is how will style the Modal container, but below is the pen:

https://codepen.io/devHammed/pen/BrMOpd

The last hack we will go over is:

• CSS Accordion

Yes, Accordion you all know can be created with pure CSS and radio buttons 🙄🙄 . Note: a single radio button can only be selected in a named group.

We will take advantage of this to create pure CSS accordion and it also utilize :checked state like CSS Menu, below is the pen for you to play around with.

https://codepen.io/devHammed/pen/WzPgbX

Thanks for taking your time to read this, 😍😍😍 and can you do this:

clap…clap…clap…clap

See you next time!!! </>

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.