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 ass. 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 mock a hidden element, use :checked pseudo-class to implement checked state.

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 an element that holds its state even if we refresh page. We can use :checked to mark selected images from a 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.