@Nawsome
Nov 10, 20221.2K views
CSSAdd prefixes
1.checkbox { 2 --border-default: #bbbbc1; 3 --border-hover: #9898a3; 4 --active: #6E7BF2; 5 --active-tick: #ffffff; 6 display: block; 7 width: 18px; 8 height: 18px; 9 cursor: pointer; 10 position: relative; 11 -webkit-tap-highlight-color: transparent; 12} 13 14.checkbox svg { 15 display: block; 16 position: absolute; 17} 18 19.checkbox input { 20 display: block; 21 outline: none; 22 border: none; 23 padding: 0; 24 margin: 0; 25 -webkit-appearance: none; 26 width: 18px; 27 height: 18px; 28 border-radius: 36%/36%; 29 box-shadow: inset 0 0 0 1.5px var(--border, var(--border-default)); 30 background: var(--background, transparent); 31 transition: background 0.25s linear, box-shadow 0.25s linear; 32} 33 34.checkbox input + svg { 35 width: 21px; 36 height: 18px; 37 left: 0; 38 top: 0; 39 color: var(--active); 40} 41 42.checkbox input + svg .tick { 43 stroke-dasharray: 20; 44 stroke-dashoffset: var(--stroke-dashoffset, 20); 45 transition: stroke-dashoffset 0.2s; 46} 47 48.checkbox input + svg .tick.mask { 49 stroke: var(--active-tick); 50} 51 52.checkbox input + svg + svg { 53 width: 11px; 54 height: 11px; 55 fill: none; 56 stroke: var(--active); 57 stroke-width: 1.25; 58 stroke-linecap: round; 59 top: -6px; 60 right: -10px; 61 stroke-dasharray: 4.5px; 62 stroke-dashoffset: 13.5px; 63 pointer-events: none; 64 -webkit-animation: var(--animation, none) 0.2s ease 0.175s; 65 animation: var(--animation, none) 0.2s ease 0.175s; 66} 67 68.checkbox input:checked { 69 --background: var(--active); 70 --border: var(--active); 71} 72 73.checkbox input:checked + svg { 74 --stroke-dashoffset: 0; 75} 76 77.checkbox input:checked + svg + svg { 78 --animation: check95; 79} 80 81.checkbox:hover input:not(:checked) { 82 --border: var(--border-hover); 83} 84 85@keyframes check95 { 86 100% { 87 stroke-dashoffset: 4.5px; 88 } 89}
HTML
1<label class="checkbox"> 2 <input type="checkbox"> 3 <svg viewBox="0 0 21 18"> 4 <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 18" id="tick-path"> 5 <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.25" fill="none" d="M5.22003 7.26C5.72003 7.76 7.57 9.7 8.67 11.45C12.2 6.05 15.65 3.5 19.19 1.69"></path> 6 </symbol> 7 <defs> 8 <mask id="tick"> 9 10 </mask> 11 </defs> 12 13 <path d="M18 9C18 10.4464 17.9036 11.8929 17.7589 13.1464C17.5179 15.6054 15.6054 17.5179 13.1625 17.7589C11.8929 17.9036 10.4464 18 9 18C7.55357 18 6.10714 17.9036 4.85357 17.7589C2.39464 17.5179 0.498214 15.6054 0.241071 13.1464C0.0964286 11.8929 0 10.4464 0 9C0 7.55357 0.0964286 6.10714 0.241071 4.8375C0.498214 2.39464 2.39464 0.482143 4.85357 0.241071C6.10714 0.0964286 7.55357 0 9 0C10.4464 0 11.8929 0.0964286 13.1625 0.241071C15.6054 0.482143 17.5179 2.39464 17.7589 4.8375C17.9036 6.10714 18 7.55357 18 9Z" mask="url(#tick)" fill="white"></path> 14 </svg> 15 <svg viewBox="0 0 11 11" class="lines"> 16 <path d="M5.88086 5.89441L9.53504 4.26746"></path> 17 <path d="M5.5274 8.78838L9.45391 9.55161"></path> 18 <path d="M3.49371 4.22065L5.55387 0.79198"></path> 19 </svg> 20</label>