.onoff{
    position:relative;width:12ch;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoff-checkbox {position:absolute;opacity:0;pointer-events:none;}
.onoff-label{display:block;overflow:hidden;cursor:pointer;
    border: .2ch solid #999999; border-radius: 2ch;
}
.onoff-inner{display:block;width:200%;margin-left:-100%;transition: margin 0.3s ease-in 0s;}
.onoff-inner:before, .onoff-inner:after {
    display:block;float:left;padding: 0;
    width:50%;height:3em;line-height: 3em;
    color:white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; box-sizing: border-box;
}

.onoff-inner:before	{content:"ON";	padding-left:2ch;	background-color:#34A7C1;color:#FFFFFF;}
.onoff-inner:after	{content:"OFF";	padding-right:2ch;	background-color:#EEEEEE;color:#999999;text-align:right;}
.onoff-switch {display:block;width:4ch;margin:.6ch;
        background: #FFFFFF;
        position: absolute;top:0;bottom:0;right: 6ch;
        border: .2ch solid #999999; border-radius: 2ch;
        transition: all 0.3s ease-in 0s; 
    }
.onoff-checkbox:checked + .onoff-label .onoff-inner	{margin-left:0;}
.onoff-checkbox:checked + .onoff-label .onoff-switch{right: 0px;}