फ़ायरफ़ॉक्स रूपरेखा पर ध्यान नहीं देता और जब Tab का उपयोग ध्यान केंद्रित का चयन तत्वों पर शैलियों

Question

प्रसंग

फ़ायरफ़ॉक्स 14 (और 13); विशिष्ट सीएसएस शैलियों कुछ शर्तों

तहत अनदेखा किया जा रहा समस्या

निम्नलिखित सीएसएस का उपयोग करना: जब Tab का उपयोग

* 
{ 
    outline:none; 
    -moz-outline:none; 
    -moz-user-focus:ignore;  
} 

JSFiddle

फ़ायरफ़ॉक्स 14 (और 13) इन शैलियों की अनदेखी select तत्वों के बीच स्विच करने के लिए। टैब का उपयोग करने के बाद इन तत्वों पर क्लिक करने से अभी भी रूपरेखा प्रदर्शित होती है।

नोट्स

• विशेष रूप * के बजाय select स्टाइल कोई प्रभाव नहीं है।
• यह केवल select तत्वों के साथ होता है।

प्रश्न

यह एक बग या अभिप्रेत व्यवहार है?

क्या कोई अन्य सीएसएस शैलियों है जो रूपरेखा को अनिश्चित काल तक दिखने से रोकने के लिए उपयोग की आवश्यकता है?

Answer 1

यह known bug है जिसने कई स्टैक ओवरफ्लो चर्चाओं को जन्म दिया है। मैंने जो पढ़ा है, उससे मोज़िला ने समझा है कि सीएसएस इस तत्व व्यवहार को संभालने के लिए गलत जगह है, और इसे अन्य तरीकों से इसे संभालने के बजाय चुना है। इस समय एकमात्र समाधान या तो tabindex="-1" का उपयोग करना है या तत्व को किसी और चीज के रूप में प्रदर्शित करने के लिए सेट करना है, और एक ड्रॉपलिस्ट के स्वरूप और अनुभव को पुन: स्थापित करना - लेकिन चेतावनी दी जानी चाहिए, यह स्वयं में कीड़े का एक खुलता है।

यदि आप ऐसा करना चुनते है, तो मैं निम्नलिखित kludge के साथ अतीत में सफलता मिली है:

select { 
    appearance: normal; 
     -webkit-appearance: none; 
     -moz-appearance: radio-container; /* renders text within select, without arrow chrome */ 
} 

सूरत ब्राउज़र बताता है कुछ और के रूप में तत्व को प्रदर्शित करने के लिए, लेकिन यह करने के लिए विक्रेता से असंगत है विक्रेता। appearance: normal; कल्पना है, जबकि वेबकिट सामान्य के साथ किसी के साथ बदलता है। -moz-appearance: radio-container; एकमात्र तरीका है जिसे मैंने चुने हुए चुनिंदा विकल्प में टेक्स्ट प्रदर्शित करने के लिए पाया है, जबकि पूरी तरह से अनुकूलित ड्रॉपलिस्ट के लिए तीर क्रोम को हटा रहा है। हालांकि, try experimenting with the available options जब तक आपको ऐसा कुछ न मिल जाए जो काम करता है और फोकस रिंग नहीं जोड़ता है जिसे आप कस्टमाइज़ करना चाहते हैं। इंटरनेट एक्सप्लोरर को आपकी जरूरतों के चयन को झुकाव के लिए आगे की आवश्यकता होगी। पूरी तरह से संभव है, लेकिन इस सवाल और उत्तर के दायरे से बाहर है।

Answer 2

अब तक एक ही रास्ता मैं काबू पाने के लिए मिल गया है यह निर्धारित करने के लिए है tabindex='-1' (see fiddle) जो, ज़ाहिर है, टैब चयन श्रृंखला से बाहर पूरी तरह से तत्व लेता है। यह उपयोगकर्ता इंटरफ़ेस के लिए अच्छा नहीं होगा, और मेरा अनुमान बिल्कुल वही नहीं है जो आप चाहते हैं (मुझे लगता है कि आप टैब एक्सेसिबिलिटी रखना चाहते हैं लेकिन केवल हाइलाइट करने के लिए अपनी स्टाइल करें)।

Answer 3

एक और समाधान रूपरेखा निर्धारित करना है: कोई भी नहीं और एक बॉक्स-छाया सेट करें। उदाहरण के लिए:

.my_elements:focus 
{ 
    outline: none; 
    box-shadow: 0 0 3px 0px red; 
}