Monday, July 9, 2012

Radio Button to Toggle Button

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






No comments: