.switch-input {display: none;} .switch-input-label {position: relative;display: inline-block;cursor: pointer;text-align: left;margin: 0;padding: 0;padding-left: 44px;} .switch-input-label:before, .switch-input-label:after {content: "";position: absolute;margin: 0;outline: 0;top: 50%;-ms-transform: translate(0, -50%);-webkit-transform: translate(0, -50%);transform: translate(0, -50%);-webkit-transition: all 0.3s ease;transition: all 0.3s ease;} .switch-input-label:before {left: 1px;width: 34px;height: 14px;background-color: #9E9E9E;border-radius: 8px;} .switch-input-label:after {left: 0;width: 20px;height: 20px;background-color: #FAFAFA;border-radius: 50%;box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);} .switch-input-label .switch-on {display: none;} .switch-input-label .switch-off {display: inline-block;} .switch-input:checked + .switch-input-label:before {background-color: rgba(92,184,92,0.5);} .switch-input:checked + .switch-input-label:after {background-color: #5CB85C;-ms-transform: translate(80%, -50%);-webkit-transform: translate(80%, -50%);transform: translate(80%, -50%);} .switch-input:checked + .switch-input-label .switch-on {display: inline-block;} .switch-input:checked + .switch-input-label .switch-off {display: none;} @media (min-width: 768px){.form-horizontal .switch-input-label {margin: 7px 0;} .form-horizontal .control-label + div .switch-input-label {margin: 17px 0;}}