BUTTONS के साथ-साथ लिंक पर फ़ायरफ़ॉक्स की बिंदीदार रूपरेखा कैसे निकालें?

507

मैं फ़ायरफ़ॉक्स बना सकते हैं इसके साथ लिंक पर बदसूरत बिंदीदार फोकस रूपरेखाओं को प्रदर्शित न करें:

a:focus { 
    outline: none; 
}

लेकिन मैं <button>टैग के लिए यह कैसे कर सकता हूं ? जब मैं ऐसा करता हूं:

button:focus { 
    outline: none; 
}

बटन पर अभी भी डॉटेड फोकस की रूपरेखा है जब मैं उन पर क्लिक करता हूं।

(और हाँ, मुझे पता है कि यह एक प्रयोज्य मुद्दा है, लेकिन मैं अपने स्वयं के फोकस संकेत प्रदान करना चाहूंगा जो बदसूरत ग्रे डॉट्स के बजाय डिजाइन के लिए उपयुक्त हैं)

css firefox

— एडवर्ड तुंगाय
स्रोत

2

ऐसा लगता है कि फ़ायरफ़ॉक्स 4 में, तत्वों को अब क्लिक किए जाने पर डिफ़ॉल्ट रूप से रूपरेखा नहीं मिल रही है, लेकिन केवल कीबोर्ड फ़ोकस प्राप्त करते समय।

— गीर्ट

1

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

— मार्कस ग्राफ

787

button::-moz-focus-inner {
  border: 0;
}

— जोश क्रोज़ियर
स्रोत

15

हाँ, यह मेरे लिए भी काम करता है! अब यह चयन के लिए कैसे किया जा सकता है?

— 7wp 19

16

ध्यान दें कि यह इनपुट के लिए भी काम करता है (उदाहरण इनपुट :: - moz-focus-inner {बॉर्डर: 0;})

— El Yobo

14

दोहरे बृहदान्त्र का उद्देश्य: (CSS3 संकेतन) evotech.net/blog/2007/05/…

— 19

21

यह मेरे लिए काम नहीं करता था, क्योंकि bootstrap.css यह बदसूरत बिंदीदार बटन बना रहा था। इसके बजाय मैंने डाल दिया है:focus {outline:none !important;}

— machineaddict

5

: फोकस {रूपरेखा: कोई नहीं;} :: - moz-focus-inner {बॉर्डर: 0;} कम विशिष्ट होगा

— बेन

310

चयनकर्ता को परिभाषित करने की आवश्यकता नहीं है।

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

हालाँकि, यह W3C से पहुँच श्रेष्ठता प्रथाओं का उल्लंघन करता है। कीबोर्ड के साथ नेविगेट करने वालों की मदद करने के लिए रूपरेखा है।

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

— एंडरसन कस्टोडियो
स्रोत

8

धन्यवाद, यह मेरे लिए काम किया जब सही जवाब नहीं था। मैं गलत चयनकर्ता का उपयोग कर रहा हूँ।

— irl_irl

इसके लिए धन्यवाद, क्या यह लिंक और बटन पर भी इसे हटा देगा?

— नाथन

3

यह एक सबसे अच्छा है! स्वीकृत उत्तर केवल के लिए है <button>, न <a>ही<input>

— रॉन वैन डेर हाइजेन

2

उबंटू (जीएनयू / लिनक्स) के तहत मोज़िला फ़ायरफ़ॉक्स 30 में बिल्कुल सही।

— ई-इंफो128 १२

4

मैं इस ब्रेकिंग एक्सेसिबिलिटी के बारे में नोट करूंगा। यह याद रखना महत्वपूर्ण है कि हर कोई माउस का उपयोग नहीं कर सकता है, या अच्छी तरह से देख या देख सकता है। उस लिंक के अनुसार, (और सामान्य ज्ञान) रूपरेखा को छुपाना केवल a11y को तोड़ता है जब यह किया जाता है without ... an author-supplied visual focus indicator- दूसरे शब्दों में, यह उपयोगकर्ता-एजेंट शैली को अपने स्वयं के साथ बदलने के लिए ठीक है, जैसा कि ओपी ने उल्लेख किया है। आदर्श रूप से यह उच्च-विपरीत होना चाहिए।

— जौनपुर

48

यदि आप डॉटेड आउटलाइन से छुटकारा पाने के लिए CSS का उपयोग करना पसंद करते हैं:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

— chinkchink
स्रोत

आपको उन संख्याओं पर एक इकाई की आवश्यकता नहीं है जो शून्य हैं। 0pxबस के साथ बदला जा सकता है0

— स्लैंग

44

नीचे दिए गए लिंक के मामले में मेरे लिए काम किया, साझा करने के बारे में सोचा - अगर कोई दिलचस्पी रखता है।

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

चीयर्स!

— foxybagga
स्रोत

12

बस a { outline: none; }लिंक के लिए पर्याप्त होना चाहिए।

— अनुदान

3

यहाँ महत्वपूर्ण है चाल, अन्य समाधान नहीं था और काम नहीं किया। मेरे लिए।

— क्रिस्टियानो फोंट

लेकिन अक्सर आपको a { outline: none; }!importanta { outline: none !important; }

— बजे

24

:focus, :active {
    outline: 0;
    border: 0;
}

— blizzyx
स्रोत

एक चुनिंदा विकल्प बॉक्स के लिए मैं एक आकर्षण की तरह काम कर रहा था

— मुहम्मद अहसान

1

यह पर्याप्त विशिष्ट नहीं था, और मैं केवल aतत्वों को महत्वपूर्ण या लक्षित करने के लिए उपयोग नहीं करना चाहता था , इसलिए मुझे एक अच्छा विकल्प मिला body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }

— इवान डर्स्ट

10

[अद्यतन] यह समाधान अब काम नहीं करता है। मेरे लिए काम करने वाला समाधान यह एक https://stackoverflow.com/a/3844452/925560 है

सही उत्तर के रूप में चिह्नित फ़ायरफ़ॉक्स 24.0 के साथ काम नहीं किया।

बटन और लंगर टैग पर फ़ायरफ़ॉक्स की बिंदीदार रूपरेखा को हटाने के लिए मैंने नीचे कोड जोड़ा:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

मुझे यहाँ समाधान मिला: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

— रेनाटो कार्वाल्हो
स्रोत

2

यह अब काम नहीं कर रहा है: / समाधान है कि काम किया है यह एक stackoverflow.com/a/3844452/925560

— Renato Carvalho

8

यहां ज्यादातर जवाबों की कोशिश की, लेकिन उनमें से किसी ने भी मेरे लिए काम नहीं किया। जब मुझे महसूस हुआ कि मुझे क्रोम पर बटनों की नीली रूपरेखा से भी छुटकारा पाना है, तो मुझे एक और उपाय मिला। क्रोम में css कस्टम-स्टाइल बटन से ब्लू बॉर्डर निकालें

इस कोड ने विंडोज 7 पर फ़ायरफ़ॉक्स संस्करण 30 पर मेरे लिए काम किया। शायद यह किसी और की मदद कर सकता है :)

button:focus {outline:0 !important;}

— Vartox
स्रोत

यहाँ एक ही बात, यह एफएफ 38.0.5 पर काम करने वाला एकमात्र समाधान है

— ओलिवियर

6

CSS का उपयोग करके फ़ायरफ़ॉक्स में इन डॉटेड फ़ोकस को हटाने का कोई तरीका नहीं है।

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

निम्नलिखित बग विषय की व्याख्या करता है: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

— विटाली शारोवतोव
स्रोत

यह ठीक काम करने के लिए धन्यवाद, लेकिन मैं पहले कई लिंक बना चुका हूं, मुझे अब तक यह समस्या कभी नहीं मिली। लेकिन अब मैं असमंजस में हूं कि आखिर क्या कारण है वर्तमान में?

— दुर्गा राव

यह जवाब अब पूरी तरह से झूठ है। ::-moz-focus-inner {border:0;}कई अन्य उत्तरों में बताए अनुसार सेट करना पूरी तरह से काम करता है।

— एंडी मर्सर

@AndyM यह उत्तर काम करता है। अन्य उत्तरों में प्रस्तुत समाधान सीएसएस के लिए है और केवल व्यक्तिगत साइटों के लिए काम करता है।

— राहिल वज़ीर

7

सवाल पूछता है कि यह सीएसएस के साथ कैसे किया जा सकता है, और जवाब कहता है कि यह नहीं हो सकता है। वह झूठा है। यह हो सकता है।

— एंडी मर्सर

6

इसके लिए वेब पर कई समाधान पाए जाते हैं, जिनमें से कई काम करते हैं, लेकिन इसे मजबूर करने के लिए, ताकि निम्नलिखित उपयोग के बाद एक बार पूरी तरह से कुछ भी उजागर / फोकस न कर सकें:

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

यह बस थोड़ा अतिरिक्त सुरक्षा जोड़ता है और सौदे को सील करता है!

— शैनन होकिन्स
स्रोत

6

यह सीमा नियंत्रण प्राप्त करेगा:

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

से: फ़ायरफ़ॉक्स में रेंज इनपुट तत्व से बिंदीदार रूपरेखा निकालें

— बॉब
स्रोत

कोई अन्य समाधान के लिए काम नहीं करता है range- धन्यवाद :)

— कामिल Kiełczewski

बिल्कुल सही, लिनक्स पर फ़ायरफ़ॉक्स 72 में भी काम करता है!

— asdjfiasd

5

इस कोड का उपयोग करके फ़ायरफ़ॉक्स 46 और क्रोम 49 पर परीक्षण किया गया।

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

पहले (सफेद डॉट्स दिखाई दे रहे हैं)

बाद (सफेद डॉट्स अदृश्य हैं)

यदि आप केवल कुछ इनपुट फ़ील्ड, बटन आदि पर आवेदन करना चाहते हैं, तो अधिक विशिष्ट कोड का उपयोग करें।

input[type=text] {
  outline: none !important;
}

हैप्पी कोडिंग !!

— मदन सपकोटा
स्रोत

!importantजरूरत थी मुझे Firefox के स्टाइलशीट ओवरराइड करने के लिए के लिए। चीयर्स!

— सैमएचएच

5

बस इस सीएसएस को चुनिंदा बॉक्स में जोड़ें

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

यह मेरे लिए ठीक काम कर रहा है।

— अभय सिंह
स्रोत

4

मुझे लगता है कि आपको वास्तव में पता होना चाहिए कि आप फोकस रूपरेखा को हटाकर क्या कर रहे हैं, क्योंकि यह कीबोर्ड नेविगेशन और पहुंच के लिए गड़बड़ कर सकता है।

यदि आपको डिज़ाइन की समस्या के कारण इसे बाहर निकालने की आवश्यकता है, :focusतो बटन के लिए एक राज्य जोड़ें जो इसे कुछ अन्य दृश्य क्यू के साथ बदलता है, जैसे, सीमा को एक उज्जवल रंग में बदलना या ऐसा कुछ।

कभी-कभी मुझे उस कष्टप्रद रूपरेखा को बाहर निकालने की आवश्यकता महसूस होती है, लेकिन मैं हमेशा एक वैकल्पिक फोकस दृश्य क्यू तैयार करता हूं।

और कभी भी blur()js function का उपयोग न करें । ::-moz-focus-innerछद्म वर्ग का उपयोग करें ।

— समतल रेखा
स्रोत

4

ज्यादातर मामलों में जोड़ने के बिना !importantसीएसएस कोड को , यह काम नहीं करेगा।

इसलिए, जोड़ना न भूलें `!important`

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

या कोई अन्य कोड:

button::-moz-focus-inner {
  border: 0 !important;
}

— herci
स्रोत

3

button::-moz-focus-inner { border: 0; }

buttonसीएसएस चयनकर्ता कहां हो सकता है जिसके लिए आप व्यवहार को अक्षम करना चाहते हैं।

— wavded
स्रोत

3

आप इससे छुटकारा पाने के बजाय फोकस को तेज करना चाहते हैं।

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue}

— जेसन प्लांक
स्रोत

2

@ नथन को थोड़ी देर हो गई, लेकिन फोकस की स्थिति में कोई भी शैली नहीं होने से कीबोर्ड अनुभव में गड़बड़ी होगी। टैब कुंजी दबाए जाने पर आप यह नहीं जान पाएंगे कि आप किस पर ध्यान केंद्रित कर रहे हैं ।

— हांक नोव

@ हाँ, मैं सहमत हूँ। लेकिन फ़ायरफ़ॉक्स की रूपरेखा बदसूरत है, खासकर जब यह एक कस्टम फ़ोकस बॉर्डर के आसपास है।

— नाथन

@ नथन मैं इससे पूरी तरह सहमत हूँ। हमें जो करना चाहिए, वह कहावत के समान तत्वों को बनाने के बजाय फोकस स्टेट के लिए हमारी अपनी स्टाइल प्रदान करता है।

— हांक

3

लिंक, बटन और इनपुट तत्व से बिंदीदार रूपरेखा निकालें।

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

— फेनर खान
स्रोत

3

यदि आपके पास एक बटन पर एक सीमा है और सीमा को हटाए बिना फ़ायरफ़ॉक्स में बिंदीदार रूपरेखा को छिपाना चाहते हैं (और इसलिए यह बटन पर अतिरिक्त चौड़ाई है) आप उपयोग कर सकते हैं:

.button::-moz-focus-inner {
    border-color: transparent;
}

— डेव एवरिट
स्रोत

3

इसे हटाने के लिए नीचे दिया गया CSS कोड काम करता है:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

— Ulan-Ude
स्रोत

2

ऐसा लगता है कि इसे प्राप्त करने का एकमात्र तरीका सेटिंग है

browser.display.focus_ring_width = 0

के बारे में: प्रति ब्राउज़र के आधार पर कॉन्फ़िगर।

— Alexwilson
स्रोत

1

यह फ़ायरफ़ॉक्स वी -27.0 पर काम करता है

 .buttonClassName:focus {
  outline:none;
}

— star18bit
स्रोत

1

उपरोक्त में से कई विकल्पों को आजमाने के बाद केवल निम्नलिखित ने मेरे लिए काम किया।

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

— वकास बुखारी
स्रोत

वास्तव में (फ़ायरफ़ॉक्स 77 में कम से कम), आपको केवल आवश्यकता है: button:focus { outline: none !important } या यदि आप मुझे पसंद नहीं करते हैं! तो यह महत्वपूर्ण है, फ़ायरफ़ॉक्स स्टाइल को ओवरराइड करने के लिए भी काम करता है: :root button:focus { outline: none }

— जोनास सैंडस्टैट

1

बूटस्ट्रैप 3 के साथ मैंने इस कोड का इस्तेमाल किया। नियमों के दूसरे सेट सिर्फ पूर्ववत बूटस्ट्रैप फोकस / सक्रिय बटन के लिए क्या करता है:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

ध्यान दें कि आपकी कस्टम सीएसएस फ़ाइल आपके HTML कोड में बूटस्ट्रैप सीएसएस फ़ाइल के बाद आनी चाहिए।

— Ehsan88
स्रोत

1

हां याद नहीं है !

button::-moz-focus-inner {
 border: 0 !important;
}

— रिवाज चालिस
स्रोत

महत्वपूर्ण यहाँ उत्तर का हिस्सा नहीं है, और यदि आपके ऐप को इसकी आवश्यकता है, तो आपके पास अपने बटनों के आसपास हाइलाइट करने की तुलना में बड़ी समस्याएं हैं। हमेशा बचने का प्रयास करें!

— मोनोक्रोम

0

आप button::-moz-focus-inner {border: 0px solid transparent;}अपने सीएसएस में कोशिश कर सकते हैं ।

— सामान्य
स्रोत

BUTTONS के साथ-साथ लिंक पर फ़ायरफ़ॉक्स की बिंदीदार रूपरेखा कैसे निकालें?

इसलिए, जोड़ना न भूलें !important

इसलिए, जोड़ना न भूलें `!important`