title: Why can't I tab into CSS3 checkboxes?
body: <p>I've been following tutorial on styling checkboxes using only CSS3 and here's what I came up with:  </p>
  
  <p>DEMO:</p>
  
  <p><a href="http://cssdeck.com/labs/jaoe0azx">http://cssdeck.com/labs/jaoe0azx</a></p>
  
  <p>Checkboxes are styled just fine - but when I tab through form controls -> checkbox is being skipped. Any advice why? </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form role="form" id="login_form" data-mode="login"&gt;
      &lt;div class="form-group"&gt;
         &lt;label for="ue"&gt;Username or email:&lt;/label&gt;
         &lt;input type="email" class="form-control input-lg" name="ue" id="ue" placeholder="" /&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
         &lt;label for="password"&gt;Password:&lt;/label&gt;
         &lt;input type="password" class="form-control input-lg" name="password" id="password" placeholder="" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
            &lt;input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" /&gt;
            &lt;label for="rememberme" class="checkbox_1" tabindex="0"&gt;remember me&lt;/label&gt;
      &lt;/div&gt;
      &lt;div id="auth_area_login_button"&gt;
          &lt;button class = "btn btn-lg btn-primary"&gt;
              Login
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code> @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css');    
  
  #login_form{padding:20px;}
  
  label.checkbox_1 {
      display: inline-block;
      cursor: pointer;
      position: relative;
      padding-left: 25px;
      margin: 0px;
  }
  
  label.checkbox_1:before {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 10px;
      position: absolute;
      left: 0;
      bottom: 1px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 0px;
  }
  label.checkbox_1:hover:before{border-color:#66afe9;}
  input[type=checkbox].checkbox_1 {
      display: none;
  }
  
  input[type=checkbox].checkbox_1:checked + label.checkbox_1:before {
      content: "\2713";
      font-size: 15px;
      color: #A0A0A0;
      text-align: center;
      line-height: 15px;
  }
  </code></pre>
  
  <p>EDIT 1:  </p>
  
  <p>seems to work in firefox, but not in chrome...</p>