HTML form elements such as checkboxes and radio buttons are staples of the web. But for decades, web designers haven’t done much to improve them. That has changed a lot in recent times.
Thanks to the power of CSS (and the occasional bit of JavaScript), these features are being put to some seriously creative uses. In some cases, they are dressed up to the point of being unrecognizable. Finally, their utility now looks excellent.
To demonstrate what checkboxes and radio buttons can do, we’ve found eight unique CSS clips. While some adhere to the traditional form-based role, others are used to create a completely different visual experience.
Let’s check out what these elements can do in their previous lives. The results may surprise you!
Literal Radio Buttons by Jon Kantner
What better way to show what CSS can do for the noble radio button than to emulate an old fashioned radio? Anyone who had a boom box or hi-fi back in the day will be familiar with these sweet buttons. And yes, just clicking on one will have a delightful “squeezed” effect.
See Literary Pen Radio Buttons by Jon Kantner
A checkbox group with a Tile Style by Håvard Brynjulfsen
Here’s proof that checkboxes don’t have to be boring. By making them clickable tiles, this fragment creates a beautiful modern UI. It not only looks great; it also provides context. The elements maintain usability, even after significant styling changes.
See the Checkered Pen group as tiles by Håvard Brynjulfsen
Aggressive Toggles by Yeshua Emanuel Braz
Checkbox toggles are popular. And although we have a whole collection dedicated to them, they are always worth revisiting. This fun example looks simple enough – until you activate the switch. CSS animation powers the colorful “bump” effect, leaving no doubt about user interaction.
Check out the Codepen Pen Challenges: Bump – Aggressive Quitting by Yeshua Emanuel Braz
Minesweeper CSS Pure by Bali Balo
If you’ve ever thought about taking form elements beyond the ordinary, then this segment is for you. A collection of checkboxes has been transformed into a browser version of Minesweeper – the classic Windows game. In this case, everything is run by HTML and CSS.
Check out the Pen Pure CSS minesweeper by Bali Balo
CSS Pure Checkboxes & Radios in Darkness and Light by Ivan Grozdic
This snippet contains a complete selection (see what we did there?) of mounted radio elements and a check box. Not only that, but you will also find them styled for both light and dark color contrast methods. Almost all of these items could easily be mistaken for HTML buttons.
Check out the Pen Checkboxes and radios (dark/light) – pure css – #06 by Ivan Grozdic
Ripple Animation on Radio Input Type & checkbox by Wilder Taype
There is nothing wrong with using more traditional looking radio buttons and checkboxes. And because you can enhance them with CSS, as shown here, you don’t have to settle for the default. Not only are these examples attractive, but they also have slick animations when clicked.
Watch the Pen Ripple animation on radio input type and checkbox by WILDER TAYPE
Task Progress Meter by Clint Brown
Clever design and some helpful JavaScript have turned this set of checkboxes into an interactive to-do list. Check each task off your list and see confirmations on the screen. Need to go back a step? Uncheck tasks to start again. It’s a great example of the kind of flexibility you get by using native HTML elements. No need to build custom UIs from scratch.
See Clint Brown’s Pen Assignment Progress Meter
Pure CSS SVG Radio Selector Buttons by Nikki Pantony
If SVG is added to the mix, these radio buttons can scale to any size. The presentation is very crisp and makes for a very strong design. It’s an aesthetic that a standard form can’t match.
Check out the Pure CSS Pen – SVG Radio Selector Buttons by Nikki Pantony
Creating More Sophisticated Form Elements
There’s something to be said for the simplicity of HTML radio buttons and checkboxes. For many years, they have done their job well – and without much praise.
But web designers are now bringing these elements into the 21st century. The ability to change their appearance with CSS has led to some creative solutions. The clips in this roundup are excellent examples of what’s possible.
If you’re looking for more ideas to inspire you, check out our CodePen collection!
