title: Custom checkboxes don't display correctly on IE11 and Firefox
body: <p>I made these custom checkboxes, they are green when they are checked and gray when they aren't :</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>input[type=checkbox]{
   width: 20px; height: 20px;
   margin: 0 3px;
   display: inline-block;
   position: relative;
  }
  
  input[type=checkbox]:checked:before{
   background-color: #219741;
   display: inline-block;
   width: 100%; height: 100%;
   border: 0;
  }
  
  input[type=checkbox]:checked:after{
   content: "";
  }
  
  input[type=checkbox]:not(:checked):before{
   background-color: #ddd;
   display: inline-block;
   width: 100%; height: 100%;
   border: 0;
  }
  
  input[type=checkbox]:not(:checked):after{
  
  }
  
  
  .reserv-vehicule:checked:before{content: url('');}
  .reserv-vehicule:not(:checked):before{content: url('');}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="checkboxes"&gt;
    
    &lt;input type="checkbox" class="reserv-vehicule" checked="checked"&gt;
    &lt;input type="checkbox" class="reserv-vehicule" checked="checked"&gt;
    &lt;input type="checkbox" class="reserv-vehicule" checked="checked"&gt;
    &lt;input type="checkbox" class="reserv-vehicule" checked="checked"&gt;
    &lt;input type="checkbox" class="reserv-vehicule"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works fine on Chrome, but my checkboxes aren't displayed correctly on IE11 and Firefox , they still have the default design.</p>
  
  <p>Can someone explain to me why this code doesn't work on these browsers?</p>
  
  <p>On the DOM Explorer I see this (nothing else seems to override these values) :</p>
  
  <p><a href="https://i.stack.imgur.com/vDxA7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vDxA7.png" alt="Checkboxes"></a>
  <a href="https://i.stack.imgur.com/ZnLsF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZnLsF.png" alt="checkboxes2"></a></p>