Casella di controllo indice di tabulazione non funziona quando impostato su nascosto con design personalizzato

Question

sto usando una casella di controllo e l'aggiunta di un design personalizzato ad esso utilizzando i 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"; /* "✓" */ 
} 

Ma il problema è che durante la navigazione il modulo con la tastiera con il tasto tab la casella è ignorata. Come posso includerlo nel flusso della navigazione?

Demo

Answer 1

L'ho modificato dal display: nessuno; a opacità: 0; e funziona bene qui è il nuovo codice modificato

http://jsbin.com/yuxizazo/1

Answer 2

E 'perché avete "display: none;" impostato sulla casella di controllo effettiva.

Se si rimuove che funziona benissimo: http://jsbin.com/vogoripi/2

Se si vuole utilizzare un altro metodo per caselle di controllo per lo styling, mantenendo questa funzionalità si dovrebbe forse guardare un plugin come: http://uniformjs.com/

lo farei suggerisci di lasciarli così come sono e di lasciare la casella di controllo standard, in quanto potresti incontrare problemi a valle.