#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: flex; 12 gap: 10px; 13} 14 15 16/* Create a custom checkbox */ 17.checkmark { 18 position: relative; 19 box-shadow: rgb(255, 84, 0) 0px 0px 0px 2px; 20 background-color: rgba(16, 16, 16, 0.5); 21 height: 20px; 22 width: 20px; 23 margin-right: 10px; 24 flex-shrink: 0; 25 margin-top: -1px; 26 transition: all 0.2s ease 0s; 27 cursor: pointer; 28 transform-origin: 0px 10px; 29 border-radius: 4px; 30 margin: -1px 10px 0px 0px; 31 padding: 0px; 32 box-sizing: border-box; 33} 34 35.container input:checked ~ .checkmark { 36 box-shadow: rgb(255, 84, 0) 0px 0px 0px 2px; 37 background-color: rgba(245, 24, 24, 0.5); 38 height: 20px; 39 width: 20px; 40 margin-right: 10px; 41 flex-shrink: 0; 42 margin-top: -1px; 43 transition: all 0.2s ease 0s; 44 cursor: pointer; 45 transform-origin: 0px 10px; 46 border-radius: 4px; 47 margin: -1px 10px 0px 0px; 48 padding: 0px; 49 box-sizing: border-box; 50} 51 52.checkmark:after { 53 content: ""; 54 position: absolute; 55 display: none; 56} 57 58.container input:checked ~ .checkmark:after { 59 display: block; 60} 61 62/* Style the checkmark/indicator */ 63.container .checkmark:after { 64 left: 0.45em; 65 top: 0.25em; 66 width: 0.25em; 67 height: 0.5em; 68 border: solid white; 69 border-width: 0 0.15em 0.15em 0; 70 transform: rotate(45deg); 71 transition: all 500ms ease-in-out; 72}
Comments
MIT License