Radio button to Switches

Change the appearance of radio buttons to switches

by Rohit Bisht

HTML

<div class="tenor switch2">
    <input type="radio" class="switch-input2" name="refreshfrequency" value="daily" id="daily" checked="">
    <label for="daily" class="switch-label2 switch-label-daily">Daily</label>
    <input type="radio" class="switch-input2" name="refreshfrequency" value="monthly" id="monthly">
    <label for="monthly" class="switch-label2 switch-label-monthly">Monthly</label>
    <input type="radio" class="switch-input2" name="refreshfrequency" value="quarterly" id="quarterly">
    <label for="quarterly" class="switch-label2 switch-label-quarterly">Quarterly</label>
    <input type="radio" class="switch-input2" name="refreshfrequency" value="halfyearly" id="halfyearly">
    <label for="halfyearly" class="switch-label2 switch-label-halfyearly">Halfyearly</label>
    <input type="radio" class="switch-input2" name="refreshfrequency" value="yearly" id="yearly">
    <label for="yearly" class="switch-label2 switch-label-yearly">Yearly</label>
    
</div>

CSS

.switch2 {
    position: relative;
    height: 25px;
    width: 100%;
    background-color:white;
    border:1px solid #dde2dc;
}

.switch-label2 {
    position: relative;
    float: left;
    width: 60px;
    line-height: 26px;
    font-size: 11px;
    color: black;
    text-align: center;
    cursor: pointer;
}

.switch-label2:active {
    font-weight: bold;
}

.switch-label-daily {
    width:20%;
}


.switch-label-monthly {width:20%;
}

.switch-label-quarterly {width:20%;
}

.switch-label-halfyearly {width:20%;
}

.switch-label-yearly {width:20%;
}

.switch-input2 {
    display: none;
}

.switch-input2:checked+.switch-label2 {
    font-weight: bold;
    color: white;
    background-color:#0d5100;
    border-bottom:1px solid #dde2dc;
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
}