Checkbox by sujeet-12
#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 animation: jello-horizontal 0.9s both; 17} 18 19.checkmark:hover { 20 animation: jello-horizontal 0.9s both; 21} 22 23/* Create a custom checkbox */ 24.checkmark { 25 position: relative; 26 top: 0; 27 left: 0; 28 height: 1.3em; 29 width: 1.3em; 30 border-radius: 50%; 31 background-color: #eee; 32} 33 34/* When the checkbox is checked, add a blue background */ 35.container input:checked ~ .checkmark { 36 background-color: royalblue; 37} 38 39/* Create the checkmark/indicator (hidden when not checked) */ 40.checkmark:after { 41 content: ""; 42 position: absolute; 43 display: none; 44} 45 46/* Show the checkmark when checked */ 47.container input:checked ~ .checkmark:after { 48 display: block; 49} 50 51/* Style the checkmark/indicator */ 52.container .checkmark:after { 53 left: 0.45em; 54 top: 0.25em; 55 width: 0.25em; 56 height: 0.5em; 57 border: solid white; 58 border-width: 0 0.15em 0.15em 0; 59 transform: rotate(45deg); 60} 61 62@keyframes jello-horizontal { 63 0% { 64 -webkit-transform: scale3d(1, 1, 1); 65 transform: scale3d(1, 1, 1); 66 } 67 68 30% { 69 -webkit-transform: scale3d(1.25, 0.75, 1); 70 transform: scale3d(1.25, 0.75, 1); 71 } 72 73 40% { 74 -webkit-transform: scale3d(0.75, 1.25, 1); 75 transform: scale3d(0.75, 1.25, 1); 76 } 77 78 50% { 79 -webkit-transform: scale3d(1.15, 0.85, 1); 80 transform: scale3d(1.15, 0.85, 1); 81 } 82 83 65% { 84 -webkit-transform: scale3d(0.95, 1.05, 1); 85 transform: scale3d(0.95, 1.05, 1); 86 } 87 88 75% { 89 -webkit-transform: scale3d(1.05, 0.95, 1); 90 transform: scale3d(1.05, 0.95, 1); 91 } 92 93 100% { 94 -webkit-transform: scale3d(1, 1, 1); 95 transform: scale3d(1, 1, 1); 96 } 97} 98 99
886 views
886 views
sujeet-12 23. July 2023. at 18:19
23. July 2023. at 18:19
This is my new code for checkbox
Variations
1 MIT License