415 views
1/* Hide the default checkbox */ 2.container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6 height: 0; 7 width: 0; 8} 9 10.container { 11 display: block; 12 position: relative; 13 cursor: pointer; 14 font-size: 20px; 15 user-select: none; 16} 17 18/* Create a custom checkbox */ 19.checkmark { 20 position: relative; 21 top: 0; 22 left: 0; 23 height: 6em; 24 width: 3em; 25 background-color: #ccc; 26} 27 28.switch { 29 position: relative; 30 height: 5.4em; 31 width: 2.4em; 32 top: .3em; 33 left: .3em; 34 background-color: white; 35 box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 2px, rgba(0, 0, 0, 0.3) 0px 0px 0px -3px, rgba(0, 0, 0, 0.2) 0px -8px 0px inset; 36} 37 38.container input:checked ~ .checkmark .switch { 39 box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 0px 0px -3px, rgba(0, 0, 0, 0.2) 0px -6px 0px inset; 40 transform: rotateX(180deg); 41}
Praashoo7
Prashant
MIT License