.cbx:checked~label { background: #117D99; } .cbx:checked~label:after { left: 20px; height: 16px; width: 16px; background: white; margin-top: 2px; } .cbx:disabled~label { background: #d5d5d5; pointer-events: none; } .cbx:disabled~label:after { background: #bcbdbc; } .lbl { position: relative; display: block; height: 20px; width: 38px; background: #898989; border-radius: 100px; cursor: pointer; transition: all 0.3s ease; margin-right: 28px; margin-bottom: -5px; } .lbl:after { position: absolute; left: 2px; display: block; width: 16px; height: 16px; margin-top: 2px; border-radius: 100px; background: #fff; box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05); content: ''; transition: all 0.3s ease; } .hidden { display: none; }