label { margin-top: 1ex; } .custom-check { display: table; width: auto; > * { visibility: hidden; } &.checked > * { visibility: visible; } } .custom-toggle { display: inline-block; width: auto; height: 2.25rem; min-width: 58px; background: #e9ecef; border: 1px solid #ced4da; border-radius: 1.25rem; transition: background 200ms ease, padding 200ms ease; text-align: left; padding: 3px 3px 3px 24px; &.is-toggled { background: #4f94d9; padding: 3px 24px 3px 3px; .handle-label { color: #4f94d9; } } &.is-invalid, &.is-valid { background-image: none; padding: 3px 24px 3px 3px; &.is-toggled { padding: 3px 24px 3px 3px; } } &.is-invalid.is-toggled { background: red; .handle-label { color: red; } } &:hover { cursor: pointer; } &:focus { background-color: #e9ecef; border-color: #ced4da; &.is-toggled { background-color: #4f94d9; } } .handle { display: inline-block; min-width: 40px; height: 28px; background: #fff; border-radius: 1rem; text-transform: uppercase; color: green; text-align: center; padding: 0 10px; .handle-label { display: inline-block; margin-top: 2px; font-size: 18px; font-weight: 600; white-space: nowrap; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #495057; } } }