.onoff-checkbox { width:15%; } .onoffswitch { position: relative; width: 110px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; } .onoffswitch-checkbox { opacity: 0; position: absolute; } .onoffswitch-checkbox:before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 10px; position: absolute; left: 0; bottom: 1px; background-color: #fff; border: 1px solid #ccc; border-radius: 0px; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; border: 2px solid #FFFFFF !important; border-radius: 50px !important; } .onoffswitch-inner { display: block; transition: margin 0.3s ease-in 0s; } .onoffswitch-inner:before, .onoffswitch-inner:after { display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 40px; font-size: 20px; box-sizing: border-box; content: ""; background-color: #EEEEEE; } .onoffswitch-switch { display: block; width: 37px; background-color: @light-green; position: absolute; top: 0; bottom: 0; right: 0px; border: 2px solid #FFFFFF; border-radius: 50px !important; transition: all 0.3s ease-in 0s; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { margin-right: 0; } .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { right: 71px; background-color: #A1A1A1; } .onoffswitch-checkbox:focus + .onoffswitch-label .onoffswitch-switch { border: 3px solid #444444; }