css radio toggle styling

HTML

<span class="toggle-bg">
    <input type="radio" name="toggle" value="off">
    <input type="radio" name="toggle" value="on">
    <span class="switch"></span>
</span>

CSS

body {
    margin: 100px;
}
.toggle-bg {
    background: #ececec;
    /* You'll want to see the area being toggled, but feel free to change the color */
    display: block;
    /* ...So that we can set a height and width */
    float: left;
    /* ...So that it doesn't take up the full width of the page */
    height: 10px;
    /* You can change this later if you want */
    position: relative;
    /* Required to allow the switch to move around */
    width: 26px;
    /* This can be changed later as well */
    margin-top: -4px;
    box-shadow: inset 0 1px 3px #777;
    border-radius: 3px;
}
.toggle-bg input {
    height: 28px;
    left: 0;
    margin: 0;
    /* Reset the margins and padding */
    opacity: 0;
    /* Invisible! */
    padding: 0;
    position: absolute;
    top: -10px;
    /* Shift vertically */
    width: 36px;
    z-index: 2;
    /* We want the input to be over the span.switch, which we'll give a z-index of 1 */
    /*IE*/
    zoom: 1;
    filter: alpha(opacity=0);
}
.switch {
    background: #fff;
    display: block;
    float: left;
    height: 14px;
    margin-top: 2px;
    left: -1px;
    /* This is the starting point. When adding a border radius, a small bit of the background is shown if we use left: 0;, so -1px is best.*/
    position: relative;
    top: -4px;
    /* ...To keep it centered vertically */
    width: 14px;
    border-radius: 6px;
    box-shadow: 0 1px 1px #333;
    -webkit-transition: left 0.2s ease;
    z-index: 1;
    /* Remember, it must be below the invisible inputs */
}
.toggle-bg input:checked~.switch {
    left: -1px;
}
/* initial toggle position */
 .toggle-bg input~:checked~.switch {
    left: 260px;
    }
/* initial toggle position */
 .toggle-bg input~:checked~.switch {
    left: 13px;
       -webkit-transition: left 2s ease;
}
/* final relative toggle position */
 .toggle-bg input:checked {
    z-index: 0;
}