Fancy radio and checkbox inputs

Before I explain this neat little trick I’d like to make it clear that this was not my original idea, I first saw it on the Halifax bank website but I’d imagine it’s been done in a load of other places too.

Form inputs are notoriously awkward to style completely without resorting so JavaScript bodges and weird hidden forms. Creating a custom radio or checkbox is a good example of that, one thing you can do very easily though is create a different type of selector that behaves more like a slider that you’d see on a mobile device. Take a look at the example.

See the Pen Fancy radios and checkboxes by Jacek (@betterphp) on CodePen.

This exploits the fact that clicking on the label text for an input will focus the browser on that input, for radio or checkbox inputs it will also toggle their click state, basically acting as if you’d actually clicked it. The buttons you can see above are actually the labels for the conventional inputs, which have been hidden. There is a bit of extra code to neaten things up for the demo but it really all comes down to this snippet

input[type="radio"], input[type="checkbox"] {
    display: none;

    + label {
      display: inline-block;
      width: 80px;
      line-height: 30px;
      text-align: center;
      background: #ddd;
      cursor: pointer;
    }

    &:checked + label {
        background: #aaf;
    }
}