#e8e8e8
1/*------ Settings ------*/ 2.container { 3 --color: #a5a5b0; 4 --size: 30px; 5 display: flex; 6 justify-content: center; 7 align-items: center; 8 position: relative; 9 cursor: pointer; 10 font-size: var(--size); 11 user-select: none; 12 fill: var(--color); 13} 14 15.container .check-regular { 16 position: absolute; 17 animation: keyframes-fill .5s; 18} 19 20.container .check-solid { 21 position: absolute; 22 display: none; 23 animation: keyframes-fill .5s; 24} 25 26/* ------ On check event ------ */ 27.container input:checked ~ .check-regular { 28 display: none; 29} 30 31.container input:checked ~ .check-solid { 32 display: block; 33} 34 35/* ------ Hide the default checkbox ------ */ 36.container input { 37 position: absolute; 38 opacity: 0; 39 height: 0; 40 width: 0; 41} 42 43/* ------ Animation ------ */ 44@keyframes keyframes-fill { 45 0% { 46 transform: scale(0); 47 opacity: 0; 48 } 49 50 50% { 51 transform: scale(1.2) rotate(15deg); 52 } 53}
265 views
Variation of acheckbox
265 views
Variation of acheckbox
Comments
MIT License