Checkbox by TechByElijah
#e8e8e8
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: inline-block; 12 position: relative; 13 cursor: pointer; 14 font-size: 20px; 15 user-select: none; 16 width: 24px; 17 height: 24px; 18} 19 20 /* Create a custom checkbox */ 21.checkmark { 22 position: absolute; 23 top: 0; 24 left: 0; 25 height: 100%; 26 width: 100%; 27 background-color: #fff; 28 border-radius: 50%; 29 border: 1px solid rgba(255, 255, 255, 0.3); 30 transition: background-color 0.3s ease; 31 z-index: 1; 32} 33 34.glass-effect { 35 position: absolute; 36 top: 50%; 37 left: 50%; 38 transform: translate(-50%, -50%) scale(0); 39 height: 14px; 40 width: 14px; 41 background-color: rgba(255, 255, 255, 0.2); 42 border-radius: 50%; 43 transition: transform 0.3s ease; 44 z-index: 2; 45} 46 47 /* When the checkbox is checked, add a blue background */ 48.container input:checked ~ .checkmark { 49 background-color: #2196F3; 50} 51 52 /* Show the glass effect when checked */ 53.container input:checked ~ .glass-effect { 54 transform: translate(-50%, -50%) scale(1); 55} 56 57 /* Create the checkmark/indicator (hidden when not checked) */ 58.checkmark:after { 59 content: ""; 60 position: absolute; 61 display: none; 62} 63 64 /* Show the checkmark when checked */ 65.container input:checked ~ .checkmark:after { 66 display: block; 67} 68 69 /* Style the checkmark/indicator */ 70.container .checkmark:after { 71 content: ""; 72 position: absolute; 73 top: 50%; 74 left: 50%; 75 width: 5px; 76 height: 10px; 77 border: solid white; 78 border-width: 0 2px 2px 0; 79 transform: translate(-50%, -50%) rotate(45deg); 80}
538 views
538 views
MIT License