input[type="checkbox"] { position: absolute; opacity: 0; }
/* Normal Track */
input[type="checkbox"].ios-switch ~ span { display: block; vertical-align: middle; width: 40px; height: 20px; border: 1px solid rgba(0,0,0,.2); border-radius: 999px; background-color: #fff; transition-duration: .4s; -webkit-transition-duration: .4s; -webkit-transition-property: background-color, box-shadow; transition-property: background-color, box-shadow; box-shadow: inset 0 0 0 0px rgba(0,0,0,0.2); margin: 3px; /*margin: 15px 1.2em 15px 2.5em;*/ }
/* Checked Track (Blue) */
input[type="checkbox"].ios-switch:checked ~ span { display: block; width: 40px; background-position: 0 0; background-color: #1980DD; border: 1px solid rgba(0,0,0,.2); box-shadow: inset 0 0 0 10px rgba(25,128,221,1); }
/* Tiny Track */
input[type="checkbox"].tinyswitch.ios-switch ~ span { display: block; width: 34px; height: 18px; }
/* Green Track */
input[type="checkbox"].green.ios-switch:checked ~ span { display: block; background-color: #00e359; border: 1px solid rgba(0,0,0,.2); box-shadow: inset 0 0 0 10px rgba(0,227,89,1); }
/* Normal Knob */
input[type="checkbox"].ios-switch ~ span > span { display: block; float: left; width: 18px; height: 18px; border-radius: inherit; background: #ffffff; -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1); -webkit-transition-duration: 0.4s; transition-duration: 0.4s; -webkit-transition-property: transform, background-color, box-shadow; transition-property: transform, background-color, box-shadow; -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1); transition-timing-function: cubic-bezier(.54,1.85,.5,1); -moz-transition-duration: 0.4s; -moz-transition-property: transform, background-color; transition-property: transform, background-color; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(0, 0, 0, 0.4); pointer-events: none; margin-top: 1px; margin-left: 1px; }
/* Checked Knob (Blue Style) */
input[type="checkbox"].ios-switch:checked ~ span > span { display: block; transform: translate3d(20px, 0, 0); -webkit-transform: translate3d(20px, 0, 0); -moz-transform: translate3d(20px, 0, 0); background-color: #ffffff; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(8, 80, 172,1); }
/* Tiny Knob */
input[type="checkbox"].tinyswitch.ios-switch ~ span > span { display: block; width: 16px; height: 16px; margin-top: 1px; }
/* Checked Tiny Knob (Blue Style) */
input[type="checkbox"].tinyswitch.ios-switch:checked ~ span > span { display: block; transform: translate3d(16px, 0, 0); -webkit-transform: translate3d(16px, 0, 0); -moz-transform: translate3d(16px, 0, 0); box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0px 0px 0 1px rgba(8, 80, 172,1); }
/* Green Knob */
input[type="checkbox"].green.ios-switch:checked ~ span > span { display: block; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 162, 63,1); }