title: Replacing a checkbox element with icons
body: <p>I want to customize the browser checkbox. When the status is checked, the icon <code>checked.svg</code> should be displayed instead of checkbox and the icon <code>unchecked.svg</code> otherwise.</p>
  
  <p>Here is my code.
  HTML:</p>
  
  <pre><code>&lt;div class="checkbox-custom"&gt;
     &lt;input type="checkbox"/&gt;
        &lt;div class="checkmark"&gt;
            &lt;img src="@/assets/images/icons/checkbox/unchecked.svg" class="unchecked"/&gt;
            &lt;img src="@/assets/images/icons/checkbox/checked.svg" class="checked"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SASS:</p>
  
  <pre><code>.checkbox-custom {
      position: absolute;
      width: 28px;
      height: 28px;
      left: 0;
      top: 0;
  
      // Hide default browser checkbox
      input[type=checkbox] {
                  display: none;
              }
  
     input[type=checkbox] + .checkmark {
          position: absolute;
          left: 3.5px;
          top: 3.5px;
          right: 3.5px;
          bottom: 3.5px;
  
          display: inline-block;
          cursor: pointer;
  
          img {
              width: 21px;
              height: 21px;
          }
  
          .checked {
              display: none;
          }
      }    
  
      input[type=checkbox]:checked + .checkmark {
          .checked {
              display: block;
          }
  
          .unchecked {
              display: none;
          }
      }
   }
  </code></pre>
  
  <p>When i click on the checkbox, nothing happens. What could be the error?</p>