#212121
1.switch { 2 --false: #E81B1B; 3 --true: #009068; 4} 5 6input[type=checkbox] { 7 appearance: none; 8 height: 2rem; 9 width: 3.5rem; 10 background-color: #fff; 11 position: relative; 12 border-radius: .2em; 13 cursor: pointer; 14} 15 16input[type=checkbox]::before { 17 content: ''; 18 display: block; 19 height: 1.9em; 20 width: 1.9em; 21 transform: translate(-50%, -50%); 22 position: absolute; 23 top: 50%; 24 left: calc(1.9em/2 + .3em); 25 background-color: var(--false); 26 border-radius: .2em; 27 transition: .3s ease; 28} 29 30input[type=checkbox]:checked::before { 31 background-color: var(--true); 32 left: calc(100% - (1.9em/2 + .3em)); 33}
Comments
MIT License