custom checkbox

by gbos

HTML

/*

custom checkbox: https://codepen.io/rolchau/pen/rlAtq

*/





<svg xmlns="http://www.w3.org/2000/svg" style="display: none">
  <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>



<div class="form-container">
  <div class="promoted-checkbox">
    <input id="tmp" type="checkbox" class="promoted-input-checkbox"/>
    <label for="tmp">
      <svg><use xlink:href="#checkmark" /></svg>      
      Save recipient    
    </label>
  </div>
<div>

SCSS

$brand: #0080d3;
$grey-25: #e6e6e6;
$grey-5: #fcfcfc;

:root {
    --main-color: red;
}

*, *:before, *:after {
  box-sizing: border-box;
}

.form-container {
  padding: 1rem;
  margin: 2rem auto;
  background-color: $grey-5;
  border: 1px solid $grey-25;
  width: 50%;
}

/* 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;
}

.promoted-checkbox {
  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;
  }
  
  label:active::after {
    background-color: $grey-25;
  }
  
  label {
    color: $brand;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    &:after {
      content: "";
      height: 40px;
      width: 40px;
      margin-right: 1rem;
      float: left;
      border: 3px solid var(--main-color);
      border-radius: 3px;
      transition: 0.15s all ease-out;      
    }
  }
  svg {
    stroke: $brand;
    stroke-width: 3px;
    height: 0; //Firefox fix
    width: 24px;
    position: absolute;
    left: -48px;
    top: -4px;
    stroke-dasharray: 33; //Firefox fix
    stroke: var(--main-color);
    &.disabled {
        stroke: $grey-25;
    }
  }
}

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