Transition Support For Radio Buttons

The buttonset widget — a cousin of the button widget — is handy for working with groups of form controls. Not because any new functionality, because it isn't. It's more to do with themes and and they're applied to the elements. For example, the button widget doesn't add any capabilities not already present in native HTML buttons. It's all about consistent look and feel. The buttonset widget will take a group of radio buttons and make them appear as a single unified control. We can toggle the state of any given radio, and the appropriate states from the theme framework are applied. Why not add support for smooth transitions between these states?

The JavaScript code used to actually transition between the various theme states is a little tricky to override. In fact, we'd have to override quite a lot just for some basic transitions. We don't want that, and so as this demonstration illustrates, we can implement the desired ability through the use of CSS transitions. Of course, these will only work in newer browser versions, but that's the trade-off in terms of effort on our part. Here's all the CSS code we ever need.

.ui-buttonset label {
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

This selector applies to the buttonset widget since the label element is what the user actually sees and interacts with. The actual transition property uses the all shorthand to specify that we want every CSS property transitioned when the classes change. The vendor prefix uses the standard approach — we have the generic property — transition followed by each of the vendor prefixes.