Transition Support For Radio Buttons

jQuery UI uses the buttonset widget to group together radio buttons. We can achieve some nice effects with CSS transitions.

by Adam Boduch

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">
<form>
    <div id="radio">
        <input type="radio" id="radio1" name="radio" />
        <label for="radio1">Choice 1</label>
        <input type="radio" id="radio2" name="radio" checked="checked" />
        <label for="radio2">Choice 2</label>
        <input type="radio" id="radio3" name="radio" />
        <label for="radio3">Choice 3</label>
    </div>
</form>

CSS

/* Global styles */
body {
    font-size: 0.8em;
}

/* Transition support for buttonset widgets */
.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;
}

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 2px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 2px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 2px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 2px;
}

JavaScript

$( "#radio" ).buttonset();