#e8e8e8
1.checkbox-container { 2 display: inline-block; 3 position: relative; 4 padding-left: 35px; 5 margin-bottom: 12px; 6 cursor: pointer; 7 font-size: 16px; 8 user-select: none; 9} 10 11.custom-checkbox { 12 position: absolute; 13 opacity: 0; 14 cursor: pointer; 15 height: 0; 16 width: 0; 17} 18 19.checkmark { 20 position: absolute; 21 top: 0; 22 left: 0; 23 height: 25px; 24 width: 25px; 25 background-color: #eee; 26 border-radius: 4px; 27 transition: background-color 0.3s; 28 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); 29} 30 31.checkmark:after { 32 content: ""; 33 position: absolute; 34 display: none; 35 left: 9px; 36 top: 5px; 37 width: 5px; 38 height: 10px; 39 border: solid white; 40 border-width: 0 3px 3px 0; 41 transform: rotate(45deg); 42} 43 44.custom-checkbox:checked ~ .checkmark { 45 background-color: #2196F3; 46 box-shadow: 0 3px 7px rgba(33, 150, 243, 0.3); 47} 48 49.custom-checkbox:checked ~ .checkmark:after { 50 display: block; 51} 52 53@keyframes checkAnim { 54 0% { 55 height: 0; 56 } 57 58 100% { 59 height: 10px; 60 } 61} 62 63.custom-checkbox:checked ~ .checkmark:after { 64 animation: checkAnim 0.2s forwards; 65} 66
Comments
MIT License