Checkbox by OPOptX71285225
#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 #ccc; /* Default border color */ 25 border-radius: 6px; /* Round the corners */ 26 background-color: #fff; /* 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, glowEffect 1s infinite alternate; /* Add glow effect */ 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 #000; /* Default color for the tick */ 47 border-width: 0 3px 3px 0; /* Adjust thickness and direction */ 48} 49 50/* When the checkbox is checked, change the box color to red */ 51.checkbox-container input:checked ~ .checkmark { 52 background-color: #ff0000; /* Change box color to red */ 53 border-color: #ff0000; /* Change border color to red */ 54} 55 56/* When the checkbox is checked, change the tick color to black */ 57.checkbox-container input:checked ~ .checkmark:after { 58 border-color: #000; /* Change tick color to black */ 59} 60 61/* On hover, add a slight shadow */ 62.checkbox-container:hover .checkmark { 63 box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Add shadow effect */ 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 76/* Keyframes for glow effect */ 77@keyframes glowEffect { 78 0% { 79 box-shadow: 0 0 5px #ff0000; 80 } 81 100% { 82 box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000, 0 0 60px #ff0000; 83 } 84} 85
733 views
Variation of acheckbox
Original Post
Variations
2 MIT License