为什么我不能进入 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

输入必须可访问才能获得焦点。如果您添加以下行，它适用于铬/铬。

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 中测试}

Answer 3

因为，它不是一个复选框。

看css：

input[type=checkbox].checkbox_1 {
    display: none;
}

复选框实际上是隐藏的。因此，您将无法集中注意力。显示的程式化正方形和复选标记通过label 上的:before 伪元素。伪元素无法聚焦。标签也不能。

Answer 4

我知道这是一个老问题，但是当 CSS 解决方案对我不起作用时，我想出了一个 Jquery 解决方案，并认为其他人可能会觉得这很有帮助。我用所需的 tabindex 值和类“checkbox-add-tabindex”将输入包装在一个 div 中。然后，使用 Jquery，我将 tabindex 从 div 转移到输入。

HTML：

<div class="checkbox-add-tabindex" tabindex="10">
    <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>

jquery：

$(".checkbox-add-tabindex").focus(
    function () {
        var tabval = $(this).prop("tabindex");
        $(this).removeAttr("tabindex");
        $(this).children(":first").attr("tabindex", tabval);
        $(this).children(":first").focus();
     })