checkbox with svg

by Richard Hunter

HTML

<div class="checkbox">
  <input id="checkbox" type="checkbox">
  <label for="checkbox">
           <svg class="checked" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 2v20h-20v-20h20zm2-2h-24v24h24v-24zm-6 16.538l-4.592-4.548 4.546-4.587-1.416-1.403-4.545 4.589-4.588-4.543-1.405 1.405 4.593 4.552-4.547 4.592 1.405 1.405 4.555-4.596 4.591 4.55 1.403-1.416z"/></svg>
    <span class="text">hello world</span>
  </label>
</div>

SCSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background: black;
}

.checkbox {
  background: darkblue;
  font-family: arial;
  display: inline-block;
  position: relative;
  font-size: 1.6rem;
  
  svg {

    fill: white;
  }
  
  svg,
  .text {
    vertical-align: middle;
  }
  .checked {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
  }

  label {
    padding: 3em;
    color: white;
    display: inline-block;
  }
  input[type="checkbox"]:checked+label {

    box-shadow: inset 0 0 0 0.1em white;
    .checked {
      display: inline-block;
    }
  }
}

input[type="checkbox"] {
  display: none;
}