Question

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

样本：

复选框的样式很好 - 但是当我选中表单控件时 - ＆gt;正在跳过复选框。有什么建议吗？

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

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

Answer 4

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

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

4 个答案: