爲什麼我不能進入CSS3複選框？

我一直在下面僅使用CSS3和這裏的造型複選框教程就是我想出了：爲什麼我不能進入CSS3複選框？

DEMO：

複選框被風格就好了 - 但是當我通過TAB鍵窗體控件 - >複選框正在跳過。任何建議爲什麼？

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的工作，但不是在鉻...

來源

2014-01-22 Dannyboy

你好，請出示在這裏一些相關的代碼。謝謝！（[這裏]（http://meta.stackexchange.com/questions/125997/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to -it/126000＃126000）why） –

至少在最新的Firefox（26.0）上按下密碼字段上的選項卡後似乎獲得焦點，但我無法在空格鍵中檢查它，如在「正常」複選框中。 –

嗯。是的 - 在Firefox中工作，而不是鉻... – Dannyboy

由於實際複選框被隱藏與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測試}

來源

2014-01-22 13:54:27 DaniP

因爲，它是不是複選框。

看的CSS：

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

複選框實際上是隱藏的。所以，你將無法專注。顯示的程式化正方形和複選標記是label上的:before僞元素。僞元素不能被聚焦。標籤也不可以。

來源

2014-01-22 13:47:35 Abhitalks

有沒有解決方法？ – Dannyboy

將其隱藏在標籤後面，以保持默認的tabIndex。 –

如果'tabindex =「0」'或其他'tabindex'設置''''可以集中。 – binki

輸入必須可以獲得焦點。如果添加以下行，它可以在鉻/鉻中工作。

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

來源

2014-01-22 13:51:52 Martin

我用這種方法，但設置輪廓而不是邊框。 '＆：focus + label :: before {outline：auto;輪廓顏色：-webkit-focus-ring-color; }' – MrYellow

我知道這是一個古老的疑問句但是當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(); 
    })

來源

2017-04-27 16:09:41 user7932439

爲什麼我不能進入CSS3複選框？

回答

相關問題