2.7K 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 display: block; 15 height: var(--size); 16 background-color: #191A1E; 17 border-radius: 100%; 18 cursor: pointer; 19 padding: 5px; 20 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; 21} 22 23.container .checkmark { 24 width: 100%; 25 height: 100%; 26 border-radius: 50%; 27 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; 28 transition: all ease 0.3s; 29 padding: 8px; 30} 31 32.container .checkmark svg { 33 opacity: 0; 34 transition: all ease 0.3s; 35} 36 37.container input:checked + .checkmark { 38 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; 39} 40 41.container input:checked + .checkmark svg { 42 opacity: 1; 43}
HTML
1<label class="container"> 2 <input checked="checked" type="checkbox"> 3 <div class="checkmark"> 4 <svg viewBox="0 0 512 512" class="ionicon" xmlns="http://www.w3.org/2000/svg"> 5 <title>Checkmark</title> 6 <path d="M416 128L192 384l-96-96" stroke-width="32" stroke-linejoin="round" stroke-linecap="round" stroke="currentColor" fill="none"></path> 7 </svg> 8 </div> 9</label>