Radio as toggle buttons

Radio buttons re-styled as toggle buttons to preserve semantically correct code and enable progressive enhancement.

by Steven Hylands

HTML

<div class="toggle-btn-grp joint-toggle">
    <label onclick="" class="toggle-btn"><input type="radio" name="group3"/>Taco</label><label onclick="" class="toggle-btn"><input type="radio" name="group3"/>Kebab</label><label onclick="" class="toggle-btn"><input type="radio" name="group3"/>Burrito</label>
</div>

<!-- Note: empty onclick attribue is there to fix iOS labels not being clickable to their input target -->

CSS

label { 
    padding:0.4em 2em 0.4em 0; 
}
.toggle-btn-grp { 
    margin:3px 0; 
}
.toggle-btn { 
    text-align:center; 
    margin:5px 2px;
    padding:0.4em 3em; 
    color:#000; 
    background-color:#FFF; 
    border-radius:10px; 
    display:inline-block; 
    border:solid 1px #CCC; 
    cursor:pointer;
}

.toggle-btn-grp.joint-toggle .toggle-btn { 
    margin:5px 0; 
    padding:0.4em 2em; 
    border-radius:0;
    border-right-color:white;
}
.toggle-btn-grp.joint-toggle .toggle-btn:first-child { 
    margin-left:2px; 
    border-radius: 10px 0px 0px 10px; 
}
.toggle-btn-grp.joint-toggle .toggle-btn:last-child { 
    margin-right:2px;  
    border-radius: 0px 10px 10px 0px;
    border-right:solid 1px #CCC;
}


.toggle-btn:hover { 
    border:solid 1px #a0d5dc !important; 
    background:#f1fdfe;
}


.toggle-btn.success { 
    background:lightgreen;
    border:solid 1px green !important; 
}


.visuallyhidden { 
    border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px; 
}

JavaScript

$(".toggle-btn:not('.noscript') input[type=radio]")
	.addClass("visuallyhidden")
	.change(function() {
    if( $(this).attr("name") ) {
      $(this).parent().addClass("success").siblings().removeClass("success")
    } else {
      $(this).parent().toggleClass("success");
    }
	});