sw

by Uncle Bens

HTML

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for="myonoffswitch">
    </label>
</div>

CSS

.onoffswitch {
    position: relative; width: 80px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    background-color: red;
}
.onoffswitch-checkbox {
}
.onoffswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 80px;
    border: 2px solid black; border-radius: 24px;
}

.onoffswitch-checkbox:checked + .onoffswitch-label {
    margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
    right: 0px; 
}