#212121
1/* To hide the checkbox */ 2#checkboxInput { 3 display: none; 4} 5 6.toggleSwitch { 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 position: relative; 11 width: 50px; 12 height: 30px; 13 background-color: rgb(82, 82, 82); 14 border-radius: 20px; 15 cursor: pointer; 16 transition-duration: .2s; 17} 18 19.toggleSwitch::after { 20 content: ""; 21 position: absolute; 22 height: 10px; 23 width: 10px; 24 left: 5px; 25 background-color: transparent; 26 border-radius: 50%; 27 transition-duration: .2s; 28 box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.26); 29 border: 5px solid white; 30} 31 32#checkboxInput:checked+.toggleSwitch::after { 33 transform: translateX(100%); 34 transition-duration: .2s; 35 background-color: white; 36} 37/* Switch background change */ 38#checkboxInput:checked+.toggleSwitch { 39 background-color: rgb(148, 118, 255); 40 transition-duration: .2s; 41} 42
2.6K views
2.6K views
Comments
MIT License