The magic you can do with CSS, checkbox and radio button

July 4, 2019, 9:09 p.m.

Back in the days styling checkboxes and radio buttons was a traumatic experience. Every time I saw design with cute, colourful checkboxes I knew it will be a pain in the… lower back. Fortunately since IE9 we can use :checked pseudo-class to play with checkboxes and radio buttons.

Custom checkbox/radio button

The easiest thing we can do is a custom checkbox/radio button. The rule is simple: hide checkbox/radio button, use before/after pseudo-class to simulate hidden element, use :checked pseudo-class to implement checked state. That's theory. And how code will look like? Like this.

Radio button example.


Next cool stuff we can do is accordion.

With a little modification we can turn accordion into tabs. I'll leave it to you as your homework.

Toggle switch

As a last example of CSS magic I'll show toggle switch.


Obviously magic isn't over. There is plenty of things we can do with CSS, checkbox and radio button. First thing that pops to my head is a directory tree. Next there is element that holds its state even if we refresh page. We can use :checked to mark selected images from gallery. I won't write that possibilities are endless, because they aren't. But with a little work we can do amazing stuff with CSS, checkbox and radio button.

Last but not least. All today's examples can be found here.