Posted in:

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"]. Initially I was hiding this by setting display:none, but as Patryk Kiedrowski points out in the comments, that will mean they are unfocusable and unable to be navigated via the keyboard. So instead, we make it invisible with the following settings:

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;

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

.radio-toolbar label {
    display: inline-block;
    background-color: #ddd;
    padding: 10px 20px;
    font-family: sans-serif, Arial;
    font-size: 16px;
    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;

For accessibility reasons, we'd also like to change the appearance when a button has focus. We can use the same selector technique. In this example I'm simply making the border dashed.

.radio-toolbar input[type="radio"]:focus + label {
    border: 2px dashed #444;

Here's what it looks like focused. This allows you to use left and right arrows to change selection:


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: