Input elementy s animac9 cvg

by Petr Haluza

HTML

<div class="checkbox-item">
  <input id="i1" type="checkbox" class="promoted-input-checkbox"/>
  <label for="i1"><svg><use xlink:href="#checkmark" /></svg> Parametr</label>
</div>
  
<div class="checkbox-item">
  <input id="i2" type="checkbox" class="promoted-input-checkbox"/>
  <label for="i2"><svg><use xlink:href="#checkmark" /></svg> Parametrrrr rrrerere eeeeeee</label>
</div>
  
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="checkmark" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-miterlimit="10" fill="none" d="M22.9 3.7l-15.2 16.6-6.6-7.1" ></path></symbol></svg>
<!--  -->

CSS

/* HTML5 Boilerplate accessible hidden styles */
.promoted-input-checkbox { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}

.checkbox-item input:checked + label > svg {
    /* Firefox doesn't render svg's that is loading with the use tag if its been set to display: none and then toggled to display: block, so you have to use tricks like this to get it to render again:*/
    height: 24px;
    animation: draw-checkbox ease-in-out 0.2s forwards;
  }
  
 
.checkbox-item label { display:flex; gap: .5em; cursor: pointer; position: relative;  }
.checkbox-item label:before { flex-shrink:0; content: ""; height: 1em; width: 1em; border: 2px solid blue; border-radius: 3px; transition: 0.15s all ease-out }
.checkbox-item svg {
    stroke: blue;
    stroke-width: 5px;
    height: 0; /*Firefox fix*/
    width: .85em;
    position: absolute;
    left: 3px;
    top: -2px;
    stroke-dasharray: 33; /*Firefox fix*/
  }

@keyframes draw-checkbox {  0% { stroke-dashoffset: 33; }  100% { stroke-dashoffset: 0; }}


/**/
.checkbox-item { width:100px; border: 1px solid red; margin: 10px}