title: CSS - difficulty with custom check boxes between IE and Firefox
body: <p>I have written some code to help "skin" checkboxes and radio buttons using only CSS. It works very, very well ... </p>
  
  <p>.... in Chrome.</p>
  
  <p>However in FireFox and IE, it just ...fails outright. And I have absolutely no earthly idea why. The basic gist of it is that it loads a block using <code>:before</code> before the content and then places it over the default element. Of course it will be replaced with a sprite, but I have to get the outlaying behavior to function first. The code works like this; The way it is laid out in HTML is because I am using <code>Bootstrap</code>, and I am just adhering to the way it lays form fields out. I also have a Fiddle to demonstrate the problem.</p>
  
  <h1>Samples</h1>
  
  <h2><a href="http://jsbin.com/makep/1/edit" rel="nofollow">jsBin</a></h2>
  
  <p>Includes the original LESS content.</p>
  
  <h2><a href="http://jsfiddle.net/ciel/DfGLb/" rel="nofollow">jsFiddle</a></h2>
  
  <p>Only compiled CSS</p>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="checkbox"&gt;
      &lt;label&gt;
          &lt;input type="checkbox" value=""&gt;
          &lt;span style="font-size: 24px;"&gt;Option&lt;/span&gt;
      &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>LESS/CSS</h1>
  
  <pre><code>.checkbox, .radio {
      position: relative;
  
      &amp; + .checkbox {
          margin-top: 10px;
  
          &amp;.pull-left {
              left: 6px;
          }
      }
  
      &amp; + .radio {
          margin-top: 10px;
          left: 20px;
      }
  
      input[type="checkbox"] {
          &amp;:active, &amp;:hover, &amp;:focus {
              &amp;:before,
              &amp;::before {
                  background: yellow;
              }
          }
  
              &amp;:checked,
              &amp;:active:checked,
              &amp;:hover:checked,
              &amp;:focus:checked {
                  &amp;:before, &amp;::before {
                      background: green;
                  }
              }
      }
  
      input[type="radio"] {
          &amp;:active:before,
          &amp;:hover:before,
          &amp;:focus:before {
              background: yellow;
          }
  
          &amp;:checked:before,
          &amp;:active:checked:before,
          &amp;:hover:checked:before,
          &amp;:focus:checked:before {
              background: green;
          }
      }
  
  
      input[type="radio"] {
          &amp;:before, &amp;::before {
              opacity: 1;
              position: absolute;
              content: "";
              display: block;
              background: black;
              height: 24px;
              width: 24px;
              top: 2px;
          }
      }
  
      input[type="checkbox"] {
          &amp;:before, &amp;::before {
              opacity: 1;
              position: absolute;
              content: "";
              display: block;
              background: black;
              height: 24px;
              width: 24px;
              top: 2px;
          }
      }
  
      label {
          line-height: 24px;
          padding-left: 10px;
      }
  }
  </code></pre>