Radio as toggle buttons

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

by joshuatz

HTML

<h2>Joint buttons</h2>
<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>

<span id="console">Console Output:</span>

CSS

h1 { 
    font-size:20px; 
    margin-top:0; 
}


.toggle-btn-grp label { 
    padding:0.4em 2em 0.4em 0; 
}
.toggle-btn-grp { 
    margin:3px 0; 
}
.toggle-btn { 
    text-align:centre; 
    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; 
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { 
    clip: auto; 
    height: auto; 
    margin: 0; 
    overflow: visible; 
    position: static; 
    width: auto; 
}


/* CSS only version */
.toggle-btn-grp.cssonly * {
    width:140px;
    height:30px;
    line-height:30px;
}
.toggle-btn-grp.cssonly div {
    display:inline-block;
    position:relative;
    margin:5px 2px;
}

.toggle-btn-grp.cssonly div label {
    position:absolute;
    z-index:0;
    padding:0;
    text-align:center;
}

.toggle-btn-grp.cssonly div input {
    position:absolute;
    z-index:1;
    cursor:pointer;
    opacity:0;
}

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

.toggle-btn-grp.cssonly div input:checked + label {
    background:lightgreen;
    border:solid...

JavaScript

for (var t = 0; t < document.querySelectorAll(".toggle-btn input[type=radio]").length; t++){
	document.querySelectorAll(".toggle-btn input[type=radio]")[t].classList.add("visuallyhidden");
}

document.getElementById("console").innerText = document.querySelectorAll(".toggle-btn input[type=radio]").length;

/* for (var t = 0; t < document.querySelectorAll(".toggle-btn input[type=radio]").length; t++){
	var Current_Node = document.querySelectorAll(".toggle-btn input[type=radio]")[t];
	Current_Node.onchange(function(){
		this.parent().classList.add("success");
		this.siblings().classList.remove("success");
	})
} */