एफएफ में चयन बॉक्स से रूपरेखा निकालें

Question

क्या चयनित आइटम में चयनित आइटम के आसपास बिंदीदार रेखा को निकालना संभव है?

मैंने outlineसीएसएस में संपत्ति जोड़ने की कोशिश की है लेकिन यह काम नहीं किया, कम से कम एफएफ में नहीं।

<style>
   select { outline:none; }
</style>

अपडेट करें
इससे पहले कि आप आगे बढ़ें और रूपरेखा निकालें, कृपया इसे पढ़ें।
http://www.outlinenone.com/

Comments

तीन महीने पहले, मैंने एक ही चीज़ की खोज की लेकिन एक रेडियो बटन के साथ। पांच या छह से अधिक विभिन्न समाधान मैंने पाया है, कुछ भी काम नहीं किया। इसलिए मुझे संदेह है कि आप ऐसा नहीं कर सकते। मुझे आशा है कि मैं गलत हूं।

— आर्सेनी मूरज़ेंको

मुझे डर है कि यह तथ्य भी है, लेकिन अभी भी गलत साबित होने की उम्मीद है: डी

— मार्टिन

क्या वास्तव में मोज़िला में काम करने वाले मानव हैं जो सोचते हैं कि बेवकूफ बिंदीदार रेखा अच्छी लगती है? यह कुछ ऐसा क्यों है जिसे हमें हटाना है?

— बिलियोनह

Answer 1

मुझे एक समाधान मिला, लेकिन यह सभी हैक्स की मां है, उम्मीद है कि यह अन्य अधिक मजबूत समाधानों के लिए शुरुआती बिंदु के रूप में काम करेगा। नकारात्मक पक्ष (मेरी राय में बहुत बड़ा) यह है कि कोई भी ब्राउज़र जो समर्थन नहीं करता है text-shadowलेकिन समर्थन करता है rgba(IE 9) पाठ को प्रस्तुत नहीं करेगा जब तक कि आप एक पुस्तकालय का उपयोग न करें जैसे कि मॉर्डरिज़ (परीक्षण नहीं किया गया, बस एक सिद्धांत)।

डॉटेड बॉर्डर के रंग को निर्धारित करने के लिए फ़ायरफ़ॉक्स टेक्स्ट कलर का उपयोग करता है। तो बोलो अगर तुम ...

select {
  color: rgba(0,0,0,0);
}

फ़ायरफ़ॉक्स बिंदीदार सीमा को पारदर्शी रूप से प्रस्तुत करेगा। लेकिन निश्चित रूप से आपका पाठ पारदर्शी भी होगा! इसलिए हमें किसी तरह पाठ को प्रदर्शित करना चाहिए। text-shadowबचाव के लिए आता है:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

हम एक पाठ छाया डालते हैं जिसमें कोई ऑफसेट नहीं है और कोई धब्बा नहीं है, ताकि पाठ को बदल दिया जाए। निश्चित रूप से पुराने ब्राउज़र को इसमें से कुछ भी समझ में नहीं आता है, इसलिए हमें रंग के लिए एक वापसी प्रदान करनी चाहिए:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

यह तब होता है जब IE9 खेल में आता है: यह समर्थन करता है, rgbaलेकिन पाठ-छाया नहीं, इसलिए आपको एक स्पष्ट रूप से खाली चयन बॉक्स मिलेगा। आधुनिक संस्करण का text-shadowपता लगाने के साथ अपने संस्करण प्राप्त करें और करें ...

.no-textshadow select {
  color: #000;
}

का आनंद लें।

Comments

धन्यवाद दोस्त, मैं इसे जल्द ही कुछ समय देने की कोशिश करूँगा :)

— मार्टिन

एकमात्र समाधान जो वास्तव में काम करता है (एफएफ 20 का उपयोग करके)। बधाई हो!

— गिल्बर्टो टोरेज़ान

यह हर एफएफ और केवल एफएफ का ध्यान रखना चाहिए:@-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #000; } }

— तिमो किन्कोनें

क्या यह क्रोम और अन्य ब्राउज़रों में सीएसएस को प्रभावित करेगा?

— दाधीच सौरव

Answer 2

खैर, डुओपिक्सल का जवाब स्पष्ट है। यदि हम एक कदम और आगे बढ़ते हैं तो हम इसे बुलेटप्रूफ बना सकते हैं।

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

वहाँ आप जाते हैं, केवल फ़ायरफ़ॉक्स के लिए वैध है और चयनित विकल्प के चारों ओर बदसूरत बिंदीदार रूपरेखा है।

Comments

दिलचस्प है कि डुओपिक्सल के जवाब के रूप में यह समाधान काफी बुलेटप्रूफ नहीं है। यदि आप अपने चुनिंदा बॉक्स (यानी -मोज़-संक्रमण) के साथ एक संक्रमण प्रभाव का उपयोग करते हैं, तो बिंदीदार बॉक्स संक्रमण की अवधि के लिए दिखाई देगा, फिर गायब हो जाएगा। इसलिए, यदि आप '-मोज़-ट्रांज़िशन: ऑल 0.5 एस सहजता' निर्दिष्ट करते हैं, तो आप इस समाधान के साथ कॉम्बोक्स को आधे सेकंड के लिए देखेंगे, जबकि आप इसे ड्यूपिक्सल के उत्तर के साथ बिल्कुल नहीं देखेंगे। आप एक पारदर्शी रंग विशेषता रखने के लिए पूरे चुनिंदा तत्व को सेट करके इसे हल कर सकते हैं, लेकिन तब आपको कोई भी पाठ दिखाई नहीं देगा जब बॉक्स ध्यान केंद्रित नहीं करेगा।

— जॉन

संपादित करें: उपरोक्त को कहना चाहिए, "... आप इस समाधान के साथ आधे सेकंड के लिए बिंदीदार बॉक्स देखेंगे ..."। मैं अब टिप्पणी को संपादित नहीं कर सकता। वैसे भी, 'रंग: आरजीबीए (0,0,0,0);) संपत्ति वह है जो संक्रमण को ठीक करती है, और इसे चुनिंदा तत्व में होना चाहिए; '-मोज़-फोकसिंग' नहीं करेंगे। इसके अलावा दिलचस्प बात यह है कि किसी कारण से मेरे पास IE9 और क्रोम दोनों में कोई भी समस्या नहीं है, डुओपिक्सल के समाधान के साथ क्रोम, ताकि वह जिस सामान के बारे में बात कर रहा था, वह मॉर्डनिज़र के साथ पूरी तरह से अनावश्यक था।

— जॉन

यदि आप एक संक्रमण निर्दिष्ट करते हैं तो निश्चित रूप से यह दिखाई देगा। allसंक्रमण के भीतर उपयोग करना एक मक्खी पर गैटलिंग बंदूक से फायर करने जैसा है।

— फ्लेशग्राइंडर

मैक मावेरिक्स में एफएफ 33.0.3 में यह या डुओपिक्सल का समाधान काम नहीं करता है। बिंदीदार रूपरेखा के बजाय, एक नीली धुंधली रूपरेखा है।

— तिमो Khkönen

यह अक्षम विकल्पों पर ब्राउज़र शैलियों को तोड़ता है - एक बार जब फोकट में चयन होता है तो वे ग्रे आउट किए गए पाठ के बजाय काले हो जाते हैं जो उन्हें होना चाहिए।

— बिलियोनह

Answer 3

यहाँ फ़ायरफ़ॉक्स चयन बक्से के साथ स्टाइल मुद्दों को ठीक करने के लिए समाधान का एक सहयोग है। अपने सामान्य CSS रीसेट के हिस्से के रूप में इस CSS चयनकर्ता का उपयोग करें।

कक्षा प्रश्न के अनुसार रूपरेखा निकालती है, लेकिन किसी भी पृष्ठभूमि छवि को भी हटा देती है (जैसा कि मैं आमतौर पर एक कस्टम ड्रॉपडाउन तीर का उपयोग करता हूं और फ़ायरफ़ॉक्स सिस्टम ड्रॉपडाउन तीर वर्तमान में हटाया नहीं जा सकता)। अगर ड्रॉपडाउन इमेज के अलावा किसी और चीज के लिए बैकग्राउंड इमेज का इस्तेमाल किया जाता है, तो बस लाइन हटा देंbackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Comments

क्या इस पद्धति का उपयोग करके विकल्प पाठ रंग को परिभाषित करने के लिए अभी भी कोई है?

— user1063287

वास्तव में आप विक्रेता-विशिष्ट संपत्ति -moz-appearanceको सेट करके, सेलेक्ट बैकग्राउंड में उपयोग किए गए फ़ायरफ़ॉक्स तीर को हटा सकते हैं none।

— इमानुएल डेल ग्रांडे

अन्य उत्तरों में महत्वपूर्ण select::-moz-focus-innerचयनकर्ता की कमी होती है , जिससे उन्हें कम प्रभावी बना दिया जाता है। इसलिए यह मेरा my हो जाता है।

— डेव लैंड

select:-moz-focusringसाथ में color: transparentऔर text-shadow: 0 0 0 #000फ़ायरफ़ॉक्स v63 में ध्यान केंद्रित करने पर कष्टप्रद सीमा को हटा दिया

— जेसन मूर

नोट: url- उपसर्ग ()। fxsitecompat.dev/en-CA/docs/2018/… लिंक पढ़ने से मुझे यह स्पष्ट नहीं लगता है कि वे इसे चरणबद्ध करने जा रहे हैं या नहीं। लेकिन सलाह दी जाती है।

— user3342816

Answer 4

यह सभी फ़ायरफ़ॉक्स संस्करणों को लक्षित करेगा

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

आप महत्वपूर्ण को हटाना चाहते हैं, यदि आप अपनी साइट के अन्य पन्नों पर उसी स्टाइलशीट का उपयोग करने की रूपरेखा प्रस्तुत करने की योजना बनाते हैं।

Comments

यह चयनित उत्तर होना चाहिए

— ब्रैंडनस्क्रिप्ट 5

Answer 5

सामान्य तौर पर, सटीकता के उस स्तर तक शैली को नियंत्रित करना असंभव है। ऐसा कोई ब्राउज़र नहीं है जिसके बारे में मुझे पता है कि सभी नियंत्रणों में गुणों की एक समझदार सीमा का समर्थन करता है। यही कारण है कि वहाँ एक gazillion जावास्क्रिप्ट पुस्तकालयों कि "नकली" रूप छवियों और अन्य HTML तत्वों के साथ नियंत्रित करता है और कोड के लिए अपनी मूल कार्यक्षमता का अनुकरण करता है:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

Comments

Thx, मुझे लगता है कि मुझे इसे पूरा करने के लिए "अपनी खुद की" चयन सूची बनानी होगी। बहुत बुरा है कि प्रपत्र नियंत्रण ब्राउज़र में अधिक समान नहीं है।

— मार्टिन

@Martin: यह एक फ़ाइल अपलोड नियंत्रण है, जो स्टाइल नहीं किया जा सकता की दृढ़ता की तुलना में कुछ भी नहीं है सब पर अधिकांश ब्राउज़र में। ;)

— आर्सेनी मूरज़ेंको

Answer 6

<select onchange="this.blur();">

यदि आप इसका उपयोग करते हैं तो सीमा तब तक रहती है जब तक आप सूची में से एक आइटम का चयन नहीं करते हैं।

Comments

दुर्भाग्य से, यह समाधान पहुंच और प्रयोज्य दिशानिर्देशों का सम्मान नहीं करता है। नेत्रहीन उपयोगकर्ताओं के लिए टीटीएस इंटरफेस के अलावा, यह कीबोर्ड नेविगेशन को बंद कर देता है। केंद्रित तत्वों को दूसरों से अलग दिखना चाहिए, वर्तमान प्रश्न के साथ मुद्दा यह है कि फ़ायरफ़ॉक्स आपको यह तय करने की अनुमति नहीं देता है कि कैसे।

— इमानुएल डेल ग्रांडे

Answer 7

इनमें से एक आज़माएँ:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

संदर्भ

Comments

प्रयास के लिए Thx, लेकिन दुर्भाग्य से यह काम नहीं किया। शायद यह एक aतत्व पर काम करता है , लेकिन यह एक selectतत्व पर काम नहीं करता है ।

— मार्टिन

Answer 8

यहाँ समाधान आता है

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Comments

का परीक्षण किया। काम नहीं करता है। फ़ायरफ़ॉक्स इस संपत्ति को पहचानता है, लेकिन यह कुछ भी करने के लिए प्रकट नहीं होता है। इसे स्थापित करने की कोशिश की 10px solid redऔर मुझे पता नहीं चला कि यह कहां दिखाई देता है।

— एमपीएन

यह वास्तव में मेरे लिए काम किया जब अन्य सभी उच्च मतदान जवाब नहीं था।

— ताशो

Answer 9

फ़ायरफ़ॉक्स ऑल सिलेक्टेबल टैग से आउटलाइन / डॉटेड बॉर्डर निकालें।

अपनी स्टाइल शीट में कोड की यह लाइन डालें:

*:focus{outline:none !important;}   

Answer 10

सीमा-शैली जोड़ें : CSS में आपके चयन में से कोई भी नहीं ।

select {
border-style: none; }

Answer 11

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

100% काम कर रहा है

Answer 12

यह selectतत्व और रूपरेखा से ध्यान हटा देगा :

$("select").click(function(){
    $(this).blur();
});

हालांकि यह अन्य ब्राउज़रों पर इसकी कमियों के बिना नहीं है। आप उस ब्राउज़र की जाँच करना चाहेंगे जिसे उपयोगकर्ता उपयोग कर रहा है:

if (FIREFOX) {
    //implement the code
}

Comments

कृपया समझाएं कि कोड स्निपेट प्रदान करने के अलावा आपका कोड स्निपेट क्या करता है।

— सायन