If you’ve ever needed to allow a user to select one from a range of options on a webpage, you’ll know that the radio input type lets you do this.


But what if you want to customize the appearance and instead of showing regular radio buttons you want clickable buttons like this?


Well, thanks to a very helpful StackOverflow answer I was able to work out how to create this style of radio buttons.

First of all, you start off by hiding the actual circular radio buttons themselves – we’ll just be styling the labels. We can select them by using input[type="radio"]

.radio-toolbar input[type="radio"] {

Next, we set the labels up to look how we want them by default when unselected:

.radio-toolbar label {
    padding: 10px 20px;
    border: 2px solid #444;
    border-radius: 4px;    

Now we have to style the selected one differently. This is where the real CSS magic happens – we need to use the :checked selector and the “adjacent sibling” selector (+ sign). So this CSS rule applies to any label that immediately follows a checked radio button.

.radio-toolbar input[type="radio"]:checked + label { 
    border-color: #4c4;

Finally, I wanted a hover effect so that as you hovered the mouse over the other options they changed appearance. This can be achieved with the :hover selector.

.radio-toolbar label:hover {
  background-color: #dfd;

Here’s a complete example:

Vote on HN
comments powered by Disqus