Checkbox by OptX71285225
#212121
1/* Hide the default checkbox */ 2.checkbox-container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6} 7 8/* Create a custom checkbox container */ 9.checkbox-container { 10 position: relative; 11 display: inline-block; 12 font-size: 18px; /* Make the checkbox slightly bigger */ 13 margin-bottom: 12px; 14 cursor: pointer; 15} 16 17/* Style the checkmark */ 18.checkmark { 19 position: absolute; 20 top: 0; 21 left: 0; 22 height: 30px; /* Make the checkbox slightly bigger */ 23 width: 30px; /* Make the checkbox slightly bigger */ 24 border: 2px solid #2196f3; /* Default color for the box */ 25 border-radius: 6px; /* Round the corners */ 26 background-color: #2196f3; /* Default color for the box */ 27 transition: all 0.3s ease; /* Add smooth transition */ 28} 29 30/* Show the checkmark when checkbox is checked */ 31.checkbox-container input:checked ~ .checkmark:after { 32 display: block; 33 animation: checkboxExpand 0.3s ease forwards; 34} 35 36/* Style the checkmark/indicator */ 37.checkmark:after { 38 content: ""; 39 position: absolute; 40 display: none; 41 top: 50%; /* Center vertically */ 42 left: 50%; /* Center horizontally */ 43 transform: translate(-50%, -50%) rotate(45deg) scale(0); /* Center and hide initially, then scale to appear */ 44 width: 8px; /* Adjust size */ 45 height: 15px; /* Adjust size */ 46 border: solid #fff; /* Change color of the tick to white */ 47 border-width: 0 3px 3px 0; /* Adjust thickness and direction */ 48} 49 50/* On hover, add a lighter blue background color */ 51.checkbox-container:hover .checkmark { 52 background-color: #64b5f6; 53} 54 55/* When the checkbox is checked, add a black background */ 56.checkbox-container input:checked ~ .checkmark { 57 background-color: #000; 58 border-color: #000; /* Change border color */ 59} 60 61/* When the checkbox is checked, change the tick color to blue */ 62.checkbox-container input:checked ~ .checkmark:after { 63 border-color: #2196f3; /* Change tick color to blue */ 64} 65 66/* Keyframes for expanding animation */ 67@keyframes checkboxExpand { 68 0% { 69 transform: translate(-50%, -50%) rotate(45deg) scale(0); 70 } 71 100% { 72 transform: translate(-50%, -50%) rotate(45deg) scale(1); 73 } 74} 75
174 views
Variation of acheckbox
MIT License