Checkbox by gharsh11032000
#212121
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 overflow: hidden; 17} 18 19/* Create a custom checkbox */ 20.checkmark { 21 position: relative; 22 top: 0; 23 left: 0; 24 height: 1.3em; 25 width: 1.3em; 26 border: 2px solid #414141; 27 transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); 28} 29 30/* When the checkbox is checked */ 31.container input:checked ~ .checkmark { 32 border-image: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% ); 33 border-image-slice: 1; 34} 35 36/* Create the checkmark/indicator (hidden when not checked) */ 37.checkmark:after { 38 content: ""; 39 position: absolute; 40} 41 42/* Style the checkmark/indicator */ 43.container .checkmark:after { 44 left: 0.45em; 45 top: -2em; 46 width: 0.25em; 47 height: 0.5em; 48 border: solid white; 49 border-width: 0 0.15em 0.15em 0; 50 transform: rotate(45deg); 51 transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1); 52} 53 54.container .checkmark::before { 55 left: 0.45em; 56 top: 2em; 57 width: 0.25em; 58 height: 0.5em; 59 border: solid white; 60 border-width: 0 0.15em 0.15em 0; 61 transform: rotate(45deg); 62} 63 64/* Show the checkmark when checked */ 65.container input:checked ~ .checkmark:after { 66 top: 0.25em; 67} 68
937 views
937 views
MIT License