Toggle Switch
Toggle switch using CSS
<style>
/*
For accessability, makes checkbox
selectable by tabbing/screenreaders
*/
label.toggle input[type=checkbox] {
opacity: 0;
height: 1px;
margin: 0;
padding: 0;
display: block;
}
/* Outline label when checkbox is selected */
label.toggle input[type=checkbox]:focus ~ span.slider {
outline: black dotted 1px;
}
label.toggle span.slider {
/* So that we can position the toggle dot */
position: relative;
display: block;
width: 1.5em;
height: 0.75em;
padding: 0.25em;
/* Behave like input */
cursor: pointer;
/* Make it rounded */
border-radius: 0.75em;
background-color: grey;
transition: background-color 0.5s ease-in-out;
}
/* Slider Knob */
label.toggle span.slider:before {
content: '';
margin: 0;
display: block;
height: 0.75em;
width: 0.75em;
border-radius: 0.5em;
background: white;
transition: margin 0.5s ease-in-out;
}
/* When the box is checked change the appearance */
label.toggle input[type=checkbox]:checked ~ span.slider {
background-color: #428bff;
}
label.toggle input[type=checkbox]:checked ~ span.slider:before {
margin-left: 0.75em;
}
</style>
<!-- Label will be used as the content -->
<label class="toggle">
<input tabindex="0" name="checkbox" type="checkbox">
<span class="slider"></span>
</label>