title: avoid css hack for IE8 checkbox
body: <p>I'm using CSS3 to style a checkbox like this <strong><a href="http://cssdeck.com/labs/css-checkbox-styles" rel="nofollow">site</a></strong> (Slide THREE)</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="slideThree"&gt;
          &lt;input type="checkbox" id="slideThree" name="check" /&gt; 
          &lt;label for="slideThree"&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>input[type=checkbox] {
      visibility: hidden;
  }
  
  /* SLIDE THREE */
  .slideThree {
      width: 91px;
      height: 26px;
      background: #2B3D61;
      margin: 5px;
  
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      position: relative;
  
      -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
      -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
  }
  
  .slideThree:after {
      content: 'OFF';
      font: 14px/26px Arial, sans-serif;
      color: #FFF;
      position: absolute;
      right: 10px;
      z-index: 0;
      font-weight: bold;
      text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  }
  
  .slideThree:before {
      content: 'ON';
      font: 14px/26px Arial, sans-serif;
      color: #FFF;
      position: absolute;
      left: 10px;
      z-index: 0;
      font-weight: bold;
  }
  
  .slideThree label {
      display: block;
      width: 45px;
      height: 24px;
  
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
  
      -webkit-transition: all .4s ease;
      -moz-transition: all .4s ease;
      -o-transition: all .4s ease;
      -ms-transition: all .4s ease;
      transition: all .4s ease;
      cursor: pointer;
      position: absolute;
      top: 1px;
      left: 3px;
      z-index: 1;
  
      -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
      background: #fcfff4;
  
      background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
  }
  
  .slideThree input[type=checkbox]:checked + label {
      left: 44px;
  }
  </code></pre>
  
  <p>IE8 doesn't support something here. <strong>EDIT</strong> I've have a <code>DOCTYPE</code> and I've removed <code>z-index</code> but that changed nothing. Checkbox still doesn't work. Is there a way to get around this or do I need to use conditional css in my html? If it degrades to just a simple checkbox would be fine for IE8.</p>