Why can't I tab into CSS3 checkboxes?

Question

I've been following tutorial on styling checkboxes using only CSS3 and here's what I came up with:

DEMO:

http://cssdeck.com/labs/jaoe0azx

Checkboxes are styled just fine - but when I tab through form controls -> checkbox is being skipped. Any advice why?

HTML:

<form role="form" id="login_form" data-mode="login">
    <div class="form-group">
       <label for="ue">Username or email:</label>
       <input type="email" class="form-control input-lg" name="ue" id="ue" placeholder="" />
    </div>
    <div class="form-group">
       <label for="password">Password:</label>
       <input type="password" class="form-control input-lg" name="password" id="password" placeholder="" />
    </div>
    <div>
          <input id="rememberme" type="checkbox" name="rememberme" value="1" class="checkbox_1" tabindex="0" />
          <label for="rememberme" class="checkbox_1" tabindex="0">remember me</label>
    </div>
    <div id="auth_area_login_button">
        <button class = "btn btn-lg btn-primary">
            Login
        </button>
    </div>
</form>

CSS:

 @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;
}

EDIT 1:

seems to work in firefox, but not in chrome...

Answer 1

Input must be accessible to receive focus. It works in chrome/chromium if you add following lines.

input[type=checkbox].checkbox_1 {
    opacity: 0;
}
input[type=checkbox].checkbox_1:focus + label.checkbox_1:before {    
    border: 1px solid #66afe9;
}