60 views
CSSAdd prefixes
1.checkbox-wrapper-37 input[type="checkbox"] { 2 display: none; 3} 4 5.checkbox-wrapper-37 .terms-label { 6 cursor: pointer; 7 display: flex; 8 align-items: center; 9} 10 11.checkbox-wrapper-37 .terms-label .label-text { 12 margin-left: 10px; 13} 14 15.checkbox-wrapper-37 .checkbox-svg { 16 width: 30px; 17 height: 30px; 18} 19 20.checkbox-wrapper-37 .checkbox-box { 21 fill: #fff; 22 stroke: #ff7a00; 23 stroke-dasharray: 800; 24 stroke-dashoffset: 800; 25 transition: stroke-dashoffset 0.6s ease-in; 26} 27 28.checkbox-wrapper-37 .checkbox-tick { 29 stroke: #ff7a00; 30 stroke-dasharray: 172; 31 stroke-dashoffset: 172; 32 transition: stroke-dashoffset 0.6s ease-in; 33} 34 35.checkbox-wrapper-37 input[type="checkbox"]:checked + .terms-label .checkbox-box, 36 .checkbox-wrapper-37 input[type="checkbox"]:checked + .terms-label .checkbox-tick { 37 stroke-dashoffset: 0; 38}
HTML
1<div class="checkbox-wrapper-37"> 2 <input id="terms-checkbox-37" name="checkbox" type="checkbox"> 3 <label class="terms-label" for="terms-checkbox-37"> 4 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 200 200" class="checkbox-svg"> 5 <mask fill="white" id="path-1-inside-1_476_5-37"> 6 <rect height="200" width="200"></rect> 7 </mask> 8 <rect mask="url(#path-1-inside-1_476_5-37)" stroke-width="40" class="checkbox-box" height="200" width="200"></rect> 9 <path stroke-width="15" d="M52 111.018L76.9867 136L149 64" class="checkbox-tick"></path> 10 </svg> 11 <span class="label-text">Checkbox</span> 12 </label> 13</div>