if we are looking for solution where you need Radio button as Toggle button, here is one interesting solution. This we can achieve with just CSS. I have got this solution from http://jsfiddle.net/RkvAP/596/
Copy this Style in Header
body {
font-family:sans-serif;
}
#bounds {
margin:4px;
background-color:#EFEFEF;
border-radius:5px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#bounds label {
float:left;
width:2.0em;
}
#bounds label span {
text-align:center;
padding:3px 0px;
display:block;
}
#bounds label input {
position:absolute;
top:-20px;
}
#bounds input:checked + span {
background-color:#404040;
color:#F7F7F7;
}
Copy this Style in Body
div id="bounds"
<label><input type="radio" name="toggle"><span>Onspan>label>
<label><input type="radio" name="toggle"><span>Offspan>label>
/div
Copy this Style in Header
body {
font-family:sans-serif;
}
#bounds {
margin:4px;
background-color:#EFEFEF;
border-radius:5px;
border:1px solid #D0D0D0;
overflow:auto;
float:left;
}
#bounds label {
float:left;
width:2.0em;
}
#bounds label span {
text-align:center;
padding:3px 0px;
display:block;
}
#bounds label input {
position:absolute;
top:-20px;
}
#bounds input:checked + span {
background-color:#404040;
color:#F7F7F7;
}
Copy this Style in Body
div id="bounds"
<label><input type="radio" name="toggle"><span>Onspan>label>
<label><input type="radio" name="toggle"><span>Offspan>label>
/div
Comments