/*================================================== Switches - Created with Pure CSS, no js required ==================================================== */ div.switch label { display:block; position:relative; color:transparent; background:#ddd; text-indent:100%; width:52px; height:26px; cursor:pointer; transition:left .15s ease-out } div.switch input { display:none } div.switch input + label { margin-left:0; margin-right:0 } div.switch label:after { content:""; display:block; background:#fff; position:absolute; top:3px; left:3px; width:19px; height:19px; -webkit-transition:left .15s ease-out; -moz-transition:left .15s ease-out; transition:left .15s ease-out } div.switch input:checked + label { background:#2ba6cb } div.switch input:checked + label:after { left:29px } div.switch label { width:52px; height:26px } div.switch label:after { width:19px; height:19px } div.switch input:checked + label:after { left:29px } div.switch label { color:transparent; background:#ddd } div.switch label:after { background:#fff } div.switch input:checked + label { background:#2ba6cb } /* Switch Sizes */ div.switch.switch-lg label { width:65px; height:32px } div.switch.switch-lg label:after { width:26px; height:26px } div.switch.switch-lg input:checked + label:after { left:35px } div.switch.switch-sm label { width:45px; height:22px } div.switch.switch-sm label:after { width:16px; height:16px } div.switch.switch-sm input:checked + label:after { left:26px } div.switch.switch-xs label { width:39px; height:19px } div.switch.switch-xs label:after { width:13px; height:13px } div.switch.switch-xs input:checked + label:after { left:22px } div.switch.radius label { border-radius:4px } div.switch.radius label:after { border-radius:3px } /* Switch Option - Rounded */ div.switch.round { border-radius:1000px } div.switch.round label { border-radius:26px } div.switch.round label:after { border-radius:26px } /* Switch Option - Inline */ .switch.switch-inline { display:inline-block } .switch.switch-inline + .switch.switch-inline { margin-left:15px }