2K views
CSSAdd prefixes
1/* Hide the default checkbox */ 2.container input { 3 position: absolute; 4 opacity: 0; 5 cursor: pointer; 6 height: 0; 7 width: 0; 8 display: none; 9} 10 11.container { 12 --size: 50px; 13 width: var(--size); 14 height: var(--size); 15 background-color: #191A1E; 16 border-radius: 100%; 17 cursor: pointer; 18 padding: 5px; 19 box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e; 20} 21 22.container .checkmark { 23 width: 100%; 24 height: 100%; 25 border-radius: 50%; 26 box-shadow: 1.5px 1.5px 3px #0e0e0e, -1.5px -1.5px 3px rgb(95 94 94 / 25%), inset 0px 0px 0px #0e0e0e, inset 0px -0px 0px #5f5e5e; 27 transition: all ease 0.3s; 28 padding: 8px; 29} 30 31.container .checkmark svg { 32 opacity: 0; 33 transition: all ease 0.3s; 34} 35 36.container input:checked + .checkmark { 37 box-shadow: 0px 0px 0px #0e0e0e, 0px 0px 0px rgb(95 94 94 / 25%), inset 1.5px 1.5px 3px #0e0e0e, inset -1.5px -1.5px 3px #5f5e5e; 38} 39 40.container input:checked + .checkmark svg { 41 opacity: 1; 42}
HTML
1<label class="container"> 2 <input type="checkbox" checked="checked"> 3 <div class="checkmark"> 4 <svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"> 5 <title>Checkmark</title> 6 <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M416 128L192 384l-96-96"></path> 7 </svg> 8 </div> 9</label>