#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 .chevron-right { 16 position: absolute; 17 animation: keyframes-return .5s; 18} 19 20.container .chevron-down { 21 position: absolute; 22 display: none; 23 animation: keyframes-fill .5s; 24} 25 26/* ------ On check event ------ */ 27.container input:checked ~ .chevron-right { 28 display: none; 29} 30 31.container input:checked ~ .chevron-down { 32 display: block; 33} 34 35/* ------ Hide the default checkbox ------ */ 36.container input { 37 position: absolute; 38 opacity: 0; 39 cursor: pointer; 40 height: 0; 41 width: 0; 42} 43 44/* ------ Animation ------ */ 45@keyframes keyframes-fill { 46 0% { 47 transform: rotate(-90deg) scale(0); 48 opacity: 0; 49 } 50 51 50% { 52 transform: rotate(0deg) scale(1.2); 53 } 54} 55 56@keyframes keyframes-return { 57 0% { 58 transform: rotate(90deg) scale(0); 59 opacity: 0; 60 } 61 62 50% { 63 transform: rotate(0deg) scale(1.2); 64 } 65}
509 views
Variation of acheckbox
509 views
Variation of acheckbox
Comments
MIT License