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

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'll see is accordion.

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

Toggle switch

Last example of CSS magic I'll show today will be toggle switch. Idea is exactly the same as with styling checkbox. The only difference is used CSS code.


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.