为什么我不能选中CSS3复选框？

Question

我一直在使用CSS3关注样式复选框的教程,这就是我想出的:

DEMO:

http://cssdeck.com/labs/jaoe0azx

复选框的样式很好 - 但是当我通过表单控件选项卡时 - >正在跳过复选框.有什么建议吗？

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

编辑1:

似乎在Firefox中工作,但不是在chrome ...

Answer 1

必须可以输入输入才能获得焦点.如果添加以下行,它适用于铬/铬.

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

Answer 2

由于真正的复选框是隐藏的,display:none你无法集中它,但你也可以不隐藏元素只是让它:before在标签下:

input[type=checkbox].checkbox_1 {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid transparent;
  margin-top: 3px;
}

请查看http://cssdeck.com/labs/pl4ljry7

_{在Chrome中测试过}