#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} 17 18/* Create a custom checkbox */ 19.checkmark { 20 position: relative; 21 top: 0; 22 left: 0; 23 height: 1.3em; 24 width: 1.3em; 25 border: 2px solid #414141; 26 transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1); 27} 28 29/* When the checkbox is checked */ 30.container input:checked ~ .checkmark { 31 background: #0974f1; 32 border-color: #0974f1; 33 filter: drop-shadow(5px 5px); 34} 35 36/* Create the checkmark/indicator (hidden when not checked) */ 37.checkmark:after { 38 content: ""; 39 position: absolute; 40} 41 42.container .checkmark:after { 43 inset: 0; 44 margin: auto; 45 width: 0.5em; 46 height: 0.5em; 47 background-color: #414141; 48 border-width: 0 0.15em 0.15em 0; 49} 50 51/* Show the checkmark when checked */ 52.container input:checked ~ .checkmark:after { 53 width: 0.25em; 54 height: 0.5em; 55 border: solid #414141; 56 border-width: 0 0.15em 0.15em 0; 57 border-color: white; 58 background-color: transparent; 59 transform: rotate(45deg); 60} 61 62
Comments
MIT License