title: Remove border of checkbox in firefox
body: <p>I have used images for checkbox background,where image get change when checkbox is checked.It is proper in chrome but giving issue in Firefox. In Firefox it is showing border or box shadow for checkbox and also show black colour tick. </p>
  
  <p>Screenshot of checkbox:</p>
  
  <p><img src="https://i.stack.imgur.com/wVBHz.png" alt="Screenshot of checkbox"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>label {
    margin: 0;
    height: auto;
    cursor: pointer;
    font-weight: 400;
    padding: 3px 20px 3px 40px;
  }
  
  input[type="checkbox"] {
    display: block;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    -webkit-appearance: none;
    outline: 0;
    margin: -4px 0 0;
    margin-top: 1px\9;
    line-height: normal;
    position: absolute;
    margin-top: 4px\9;
  }
  
  input[type="checkbox"]:not(:checked) {
    background-image: url(http://livemysite.com/Eduardo/img/unchecked.png);
  }
  
  input[type="checkbox"]:checked {
    background-image: url(http://livemysite.com/Eduardo/img/checked.png);
    background-size: 70%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label class="checkbox"&gt;
    &lt;input type="checkbox" value="1"&gt;Test&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>