index tab Checkbox không hoạt động khi thiết lập để ẩn với thiết kế tùy chỉnh

Question

Tôi đang sử dụng một hộp kiểm và thêm một thiết kế tùy chỉnh để nó sử dụng CSS

label { 
    position: relative; 
    margin-bottom: 0.5em; } 

.input-field { 
    width: 100%; 
    border: 1px solid #ecf0f1; 
    padding: 0.5em; 
} 

input[type="radio"], 
input[type="checkbox"] { 
    display: none; 
} 

input[type="checkbox"] + label { 
    padding-left: 1.5em; 
} 

input[type="checkbox"] + label:before { 
    position: absolute; 
    left: 0; 
    top: 4px; 
    content: ""; 
    width: 1em; 
    height: 1em; 
    border: 1px solid rgba(0, 0, 0, 0.25); 
} 

input[type="checkbox"]:focus, 
input[type="checkbox"]:checked + label:before { 
    content: "\2713"; /* "✓" */ 
} 

Nhưng vấn đề là khi điều hướng dạng với bàn phím với phím tab hộp kiểm được bỏ qua. Làm thế nào tôi có thể đưa nó vào luồng điều hướng?

Demo

Answer 1

Tôi đã thay đổi nó từ màn hình: không; đến độ mờ: 0; và nó hoạt động tốt ở đây là mã sửa mới

http://jsbin.com/yuxizazo/1

Answer 2

Đó là vì bạn có "display: none;" đặt trên hộp kiểm thực tế.

Nếu bạn loại bỏ rằng nó hoạt động tốt: http://jsbin.com/vogoripi/2

Nếu bạn muốn sử dụng một phương pháp khác cho các hộp kiểm phong cách trong khi vẫn giữ chức năng này, bạn có lẽ nên xem xét một plugin như: http://uniformjs.com/

tôi sẽ đề nghị để chúng như là và chỉ cần rời khỏi hộp kiểm tiêu chuẩn, vì bạn có thể gặp phải các vấn đề sâu hơn.