html - 为什么我不能进入 CSS3 复选框？

Question

我一直在关注仅使用 CSS3 设置复选框样式的教程，这是我想出的:

演示:

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

输入必须可访问才能获得焦点。如果您添加以下行，它可以在 chrome/chromium 中使用。

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