चेकबॉक्स टैब काम नहीं कर रहा है जब

Question

मैं एक चेकबॉक्स का उपयोग कर रहा है और यह करने के लिए एक कस्टम डिजाइन जोड़ने सीएसएस

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"; /* "✓" */ 
} 

का उपयोग कर कस्टम डिजाइन के साथ छिपा हुआ करने के लिए सेट लेकिन समस्या यह है कि जब साथ कीबोर्ड के साथ प्रपत्र नेविगेट है सूचकांक टैब कुंजी चेक बॉक्स को नजरअंदाज कर दिया जाता है। मैं इसे नेविगेशन के प्रवाह में कैसे शामिल कर सकता हूं?

Demo

Answer 1

मैंने इसे डिस्प्ले से बदल दिया: कोई नहीं; अस्पष्टता के लिए: 0; और इसे यहाँ ठीक काम करता है नई संपादित कोड

http://jsbin.com/yuxizazo/1

Answer 2

यह क्योंकि आपके पास है "प्रदर्शन: कोई नहीं;" वास्तविक चेकबॉक्स पर सेट करें।

आप निकालते हैं कि यह ठीक काम करता है: http://jsbin.com/vogoripi/2

जब तुम शायद की तरह एक प्लगइन पर गौर करना चाहिए इस कार्यक्षमता रखने आप स्टाइल चेक बॉक्स के लिए एक और तरीका का उपयोग करना चाहते हैं, तो: http://uniformjs.com/

मैं करूंगा सुझाव देते हैं कि उन्हें छोड़कर मानक चेकबॉक्स छोड़ दें, क्योंकि आप लाइन के नीचे की समस्याओं में भाग ले सकते हैं।