क्रोम में css कस्टम-स्टाइल बटन से ब्लू बॉर्डर निकालें

Question

मैं एक वेब पेज पर काम कर रहा हूं, और मुझे कस्टम-स्टाइल <button>टैग्स चाहिए। तो सीएसएस के साथ, मैंने कहा border: none:। अब यह पूरी तरह से सफारी में काम करता है, लेकिन क्रोम में, जब मैं किसी एक बटन पर क्लिक करता हूं, तो यह चारों ओर एक कष्टप्रद नीली सीमा डालता है। मैंने सोचा button:active { outline: none }या button:focus { outline:none }काम करूंगा, लेकिन न तो। कोई विचार?

यह क्लिक करने से पहले जैसा दिखता है (और मैं चाहता हूं कि इसे क्लिक होने के बाद भी देखूं)

और यह वह सीमा है जिसके बारे में मैं बात कर रहा हूँ:

यहाँ मेरा CSS है:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Comments

मुझे ठीक लग रहा है? jsbin.com/oSAdovun/1/edit

— davidpauljunior

मुझे यकीन नहीं है कि यह आपके डेमो में क्यों काम करता है .. यह यहाँ कर रहा है: jsfiddle.net/NgL8H @davidpauljunior

— eshellborn

मैंने फ़ोकस नियम को उस तल पर जोड़ा, जो आपने कहा था कि काम नहीं किया है, लेकिन ऐसा लगता है: jsfiddle.net/NgL8H/1

— davidpauljunior

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

— क्रिस बी

कृपया outline: noneइस तरह सेट न करें जब तक कि आप पहुंच में हानि को बदलने के लिए तैयार न हों। इस वेबसाइट को देखें: outlinenone.com

— फ्लिम्

Answer 1

ऐसा करने की अनुशंसा नहीं की जाती है क्योंकि यह आपकी साइट की पहुंच को पुनः प्राप्त करता है; अधिक जानकारी के लिए, इस पोस्ट को देखें ।

कहा कि, यदि आप जोर देते हैं, तो यह सीएसएस काम करना चाहिए:

button:focus {outline:0;}

इसे देखें या JSFiddle: http://jsfiddle.net/u4pXu/

या इस स्निपेट में:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Comments

यह वास्तव में नहीं होना चाहिए outline: none;या यह बात नहीं है?

— henrywright

@ अच्छी तरह से, ओपी ने कोशिश की और उसके लिए काम नहीं किया।

— डायोसनी जूल

कृपया ऐसा कभी न करें। आपकी छोटी-सी शिकायत बड़े पैमाने पर पहुँच के मुद्दे के लिए अप्रासंगिक है

— 17

आपको इसे पूरी तरह से छिपाने के बजाय इसे फिर से स्टाइल करना चाहिए। इस मामले में, कुछ ऐसा करने की कोशिश करें button:focus{ outline-color: #A75000 }... संकेतक को छिपाने के बजाय आप इसे एक गहरे नारंगी में बदल दें जो शैली को फिट करता है।

— मेघकूट

@ SeanO'Brien ने ओपी की दी गई स्थिति एक ऐसी साइट के लिए हो सकती है जिसके 5 उपयोगकर्ता हैं, जो सभी सक्षम हैं। लेकिन संभवत: 1123 लोगों में से अधिकांश ने यह माना है कि यह उनकी दी हुई स्थिति के लिए चीजों को करने का सही तरीका है, लेकिन वास्तव में यह उतना भेदभावपूर्ण नहीं है।

— एलेक्सरोजर

Answer 2

रुको! उस बदसूरत रूपरेखा के लिए एक कारण है!

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

संभव समाधान: ध्यान केंद्रित करने पर बटन डार्क करें

नीचे दिए गए उदाहरणों के लिए, Chrome की नीली रूपरेखा का उपयोग करके पहली बार हटा दिया गया था button:focus { outline:0 !important; }

यहां आपके मूल बूटस्ट्रैप बटन हैं जैसे कि वे सामान्य रूप से दिखाई देते हैं:

जब वे फोकस प्राप्त करते हैं तो यहां बटन होते हैं:

यहाँ बटन जब वे दबाए जाते हैं:

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

यह सिर्फ विकलांग उपयोगकर्ताओं के लिए नहीं है

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

Comments

मुद्दा क्रोम में है, यह केवल टैब करने के बजाय क्लिक पर होता है (अधिकांश ब्राउज़रों में पाया जाने वाला तार्किक कार्यान्वयन)। इसलिए वास्तव में Google एक्सेसिबिलिटी को कम कर रहा है क्योंकि अधिकांश देवता बस इसे बंद कर देंगे (क्रोम में) Google / Chrome से संबंधित मुद्दों पर शोध / निर्धारण में अधिक समय बर्बाद (पासवर्ड की बचत, ईमेल सीएसएस समर्थन, यह)

— RunLoop

आप सही! : जब रूपरेखा को हटाने के खाते में पहुंच लेने के लिए आपको जावास्क्रिप्ट का एक सा जरूरत paciellogroup.com/blog/2012/04/...

— एमईएमएस

आप इस तरह से एक टिप्पणी को शैली / प्रारूपित भी नहीं कर सकते हैं, जिसका आप उत्तर दे सकते हैं। केवल एक टिप्पणी के माध्यम से विस्तार से इस स्तर पर प्रतिक्रिया प्रदान करना मुश्किल है।

— ए-डब

@RunLoop आप क्लिक के बाद ब्लू बॉर्डर को कैसे हटा या बदल सकते हैं? क्या इसे CSS के माध्यम से किया जा सकता है या जावास्क्रिप्ट की आवश्यकता है?

— निक

उन मुद्दों के साथ लोग बस vimium-ff

— yukashima huksay

Answer 3

मैं सिर्फ पृष्ठ के सभी टैग से रूपरेखा को हटाकर सभी का चयन करता हूं और रूपरेखा लागू करता हूं: सब कुछ करने के लिए :)

*:focus {outline:none}

जैसा कि bagofcole का उल्लेख किया गया है, आपको इसे और भी महत्वपूर्ण बनाने की आवश्यकता हो सकती है, इसलिए शैली इस तरह दिखाई देगी:

*:focus {outline:none !important}

Comments

कृपया ऐसा मत करो। वे उपयोगकर्ता जो कीबोर्ड के साथ आपके पृष्ठ को नेविगेट करते हैं, वर्तमान में केंद्रित तत्व को देखने में असमर्थ होंगे। आउटलाइन छिपाने के बजाय, तत्व को धुंधला करें यदि क्लिक इवेंट की उत्पत्ति माउस से होती है।

— जोपियो

मूल रूप से कुछ और ध्यान केंद्रित स्टाइल के लिए कर रहे हैं ...

— Arziel

Answer 4

इस समस्या के मेरे उदाहरण में मुझे निर्दिष्ट करना पड़ा box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

Comments

आपकी पोस्ट के लिए धन्यवाद! "बॉक्स-शैडो" संपत्ति मेरे मामले में बिंदु थी।

— Nightking

मेरे लिए भी यही मुद्दा था। ऐसा नहीं है कि यह प्रासंगिक है, लेकिन मैं Ubuntu 17.10 पर क्रोम में रूट्स के सेज थीम का उपयोग कर रहा था।

— स्पेंसर हिल

केवल इसके बाद काम कियाbox-shadow

— sura2k

मुझे इसे काम पर लाने के लिए महत्वपूर्ण जोड़ना था, शायद बूटस्ट्रैप की कहीं इसके लिए एक विशिष्ट परिभाषा है

— WebMan

यह मेरे लिए काम दोस्त !, समाधान पोस्ट करने के लिए धन्यवाद। चीयर्स

— द आईटॉन्ग

Answer 5

!importantबेहतर परिणाम के लिए घोषणा को न भूलें

button:focus {outline:0 !important;}

एक नियम जिसमें महत्वपूर्ण संपत्ति होती है, हमेशा कोई भी बात लागू नहीं की जाएगी जहां वह नियम सीएसएस दस्तावेज़ में दिखाई देता है।

Comments

"बेहतर परिणाम के लिए"? क्या आप बता सकते हैं कि क्या महत्वपूर्ण है?

— पोन्नूडल्स

लेकिन क्या आप बता सकते हैं कि यह क्या करता है? "जिस कारण से यह मौजूद है" उन लोगों को नहीं समझाता है जो इसका कारण नहीं जानते हैं कि इसका कारण क्या है।

— पोपनूडल्स

महत्वपूर्ण का उपयोग शायद ही कभी किया जाना चाहिए, और केवल यह सुनिश्चित करने के लिए कि बाद के नियमों से कुछ अधिलेखित नहीं किया जाना चाहिए। पिछले नियमों को अधिलेखित करते समय आपको अपने तत्वों को सही चयनकर्ता के साथ लक्षित करना चाहिए।

— पोपूडल्स

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

— बजे रोनेन साइपिस जूल

कृपया ऐसा न करें। जबकि तकनीकी रूप से यह ओपी के सवाल का जवाब देता है, फोकस स्थिति के हर संकेत outline:0 !importantको खराब करने के साथ खराब यूएक्स और खराब देव अभ्यास है। यदि आप ऐसा कर रहे हैं, तो कृपया सुनिश्चित करें कि आप फोकस स्थिति (तत्व की पृष्ठभूमि का रंग बदलना) इंगित करने के लिए कुछ और कर रहे हैं।

— बादल छाए रहेंगे

Answer 6

outlineपहुँच के लिए निकालना बहुत ही भयानक है! आदर्श रूप से, फ़ोकस रिंग केवल तभी दिखाई देती है जब उपयोगकर्ता कीबोर्ड का उपयोग करना चाहता है ।

उपयोग : फोकस-दृश्यमान । यह वर्तमान में CSS का उपयोग करके कीबोर्ड-फ़ोकस को स्टाइल करने के लिए W3C प्रस्ताव है, और फ़ायरफ़ॉक्स ( caniuse ) में समर्थित है । जब तक अन्य प्रमुख ब्राउज़र इसका समर्थन नहीं करते, तब तक आप इस मजबूत पॉलीफिल का उपयोग कर सकते हैं ।

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

मैंने और अधिक विस्तृत पोस्ट भी लिखी है जब आपको अधिक जानकारी चाहिए।

Comments

ध्यान रहे, AFAIK इसे होने की जरूरत नहीं है outlineफोकस राज्य को किसी और तरीके, जैसे के माध्यम से स्पष्ट रूप से दिखाई बना है: जैसे, लंबे समय के रूप के रूप में border, background-color, box-shadowआदि

— मार्च Örlygsson

सबसे बढ़िया उत्तर! आपकी पोस्ट पढ़ने लायक है (और अब मैं आपके बाकी ब्लॉग को देख रहा हूं focus) फ़ोकस-दिखने वाला एनपीएम पैकेज वास्तव में ऐसा है जहाँ अभी यह है।

— फेलदेव

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

— प्रेस्टा

क्या यह डेटा सही है? यह चयनकर्ता क्रोम में समर्थित है, फ़ायरफ़ॉक्स में नहीं। developer.mozilla.org/en-US/docs/Web/CSS/…

— केविन सुतल

ऐसा लगता है कि फ़ायरफ़ॉक्स में, चयनकर्ता को बुलाया जाता है :-moz-focusring, लेकिन डॉक्स के कहने के विपरीत, यह क्लिक और टैब फ़ोकस के बीच अंतर नहीं करता है। क्रोम में, अब तक आपको काम करने के लिए विशिष्ट झंडे को सक्षम करने की आवश्यकता है

— phil294

Answer 7

इसे अपने CSS फ़ाइल में जोड़ें।

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Comments

धन्यवाद। काम किया है, लेकिन एमडीएन का कहना है: यह सुविधा गैर-मानक है और एक मानक ट्रैक पर नहीं है। वेब का सामना करने वाले उत्पादन साइटों पर इसका उपयोग न करें: यह प्रत्येक उपयोगकर्ता के लिए काम नहीं करेगा। कार्यान्वयन के बीच बड़ी असंगतताएं भी हो सकती हैं और भविष्य में व्यवहार बदल सकता है।

— बेहनाम मोहम्मदी

Answer 8

या तो यह प्रयोग करें:

:active {
    outline:none;
}

या अगर यह काम नहीं करता है:

:active {
   outline:none !important;
}

यह मेरे लिए काम करता है (एफएफ और क्रोम, कम से कम)। :focusराज्य को लक्षित करने के बजाय , बस राज्य को लक्षित करें :activeऔर जब कोई उपयोगकर्ता किसी लिंक पर क्लिक करता है, तो आपके ब्राउज़र में सौंदर्य संबंधी अप्रिय प्रकाश को हटा देगा। लेकिन यह तब भी फोकस स्टेट्स को बनाए रखेगा जब एक पेज के माध्यम से विकलांग टैब या शिफ्ट-टैब वाला उपयोगकर्ता। दोनों दल खुश हैं। :)

Comments

यदि आप केवल एक ही कोड के साथ मेरे minified संस्करण को बदलने के लिए जा रहे हैं, लेकिन मेरे उत्तर को संपादित क्यों करें? यह उपयोगकर्ताओं के लिए किसी भी बेहतर स्पष्ट नहीं किया। क्या आपको उस या कुछ के लिए उत्तर क्रेडिट मिलते हैं? LOL ...

— chuk

इस तरह की StackExchange साइटों के बिंदु के पास ऐसे उत्तर हैं जो किसी को भी समझने में उन्हें पढ़ने में मदद करें। उस प्रयोजन के लिए, संक्षिप्त, संक्षिप्त कोड के साथ एक उत्तर के रूप में उपयोगी रूप से स्वरूपित कोड उपयोगी नहीं है। उन्हें अधिक पठनीय बनाकर उत्तरों में सुधार करना सभी के लिए साइट को बेहतर बनाने का एक सामान्य तरीका है।

— bignose

Answer 9

इस समस्या के लिए:

इसे इस्तेमाल करो:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

परिणाम:

Answer 10

बूटस्ट्रैप का उपयोग करने वाले और इस समस्या वाले किसी के लिए, वे उपयोग करते हैं: सक्रिय: ध्यान केंद्रित करने के साथ ही: सक्रिय और: ध्यान केंद्रित करें ताकि आपको आवश्यकता हो:

element:active:focus {
    outline: 0;
}

उम्मीद है कि किसी ने कुछ समय के लिए बचा लिया है कि एक बाहर, मेरे सिर पर धमाके के लिए सोच रहा था कि इतनी आसान चीज क्यों काम नहीं कर रही थी।

Answer 11

यदि आप बूटस्ट्रैप 4.1 और संभवतः अन्य संस्करणों का उपयोग कर रहे हैं, तो अधिकांश समाधान काम नहीं करेंगे। बहुत सिर पीटने के बाद, मुझे पता चला कि आपको छाया-कोई भी वर्ग लागू करने की आवश्यकता नहीं है :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

Answer 12

इसी से मेरा काम बना है:

button:focus {
    box-shadow:none;
}

Answer 13

क्रोम और अन्य ब्राउज़रों के लिए फिक्स

button:focus { outline: none !important; box-shadow: none !important; }

Answer 14

उन सभी तत्वों के लिए इस कोड को आज़माएं, जिनमें ब्लू बॉर्डर की समस्या है

*{
outline: none;
}

या

*{
outline-style: none;
}

Answer 15

एक्सेसिबिलिटी की समस्या को हल करने का एक और तरीका जो यहाँ अभी तक नहीं बताया गया है वह है जावास्क्रिप्ट का थोड़ा सा हिस्सा । क्रेडिट्स ने इस आनन्दमय ब्लॉगपोस्ट को हैकनून से जाना: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

यहाँ दृष्टिकोण वास्तव में सरल अभी तक प्रभावी है: एक वर्ग जोड़ना जब लोग पृष्ठ को नेविगेट करने के लिए टैब-कुंजी का उपयोग करना शुरू करते हैं (और वैकल्पिक रूप से माउस को फिर से स्विच करने पर इसे हटा देते हैं। तब आप इस कक्षा का उपयोग या तो फ़ोकस रूपरेखा प्रदर्शित करने के लिए कर सकते हैं)। ।

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

Answer 16

मुझे उसी समस्या का सामना करना पड़ा इसलिए मैंने सरल सीएसएस का इस्तेमाल किया-

.custom-button {
    outline: none
}

Answer 17

यदि आप इनपुट में समान प्रभाव हटाना चाहते हैं, तो आप निम्न कोड के साथ ही बटन भी जोड़ सकते हैं।

input:focus {outline:0;}

Answer 18

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

1. इस छोटे पॉलीफ़िल (लगभग 10kb) का उपयोग करें: https://github.com/WICG/focus-v
अदृश्य 2. अपने सीएसएस में कहीं और अगला कोड जोड़ें:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Css4- चयनकर्ता का ब्राउज़र-समर्थन: फ़ोकस-दृश्य अभी बहुत कमज़ोर है: https://caniuse.com/#search=f-s- अदृश्य

Answer 19

सरलता से लिखिए outline:none;। छद्म तत्व का उपयोग करने की आवश्यकता नहीं हैfocus

Answer 20

यह क्रोम परिवार में एक मुद्दा है और हमेशा से रहा है।

एक बग को उठाया गया है https://bugs.chromium.org/p/chromium/issues/detail?id=42448

इसे यहां दिखाया जा सकता है: https://codepen.io/anon/pen/Jedvwj जैसे ही आप किसी भी बटन के लिए बॉर्डर जोड़ते हैं जैसे (जैसे भूमिका = "बटन" उदाहरण के लिए एक टैग में जोड़ा गया है) क्रोम गड़बड़ करता है और जब आप अपने माउस से क्लिक करते हैं तो फोकस स्थिति सेट करता है।

मैं इस फिक्स का उपयोग करने की अत्यधिक सलाह देता हूं: https://github.com/wicg/focus-v अदृश्य ।

बस निम्नलिखित करें

npm install --save focus-visible

स्क्रिप्ट को अपने html में जोड़ें:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

या वेबपैक या कुछ समान का उपयोग करते हुए अपनी मुख्य प्रविष्टि फ़ाइल में आयात करें:

import 'focus-visible/dist/focus-visible.min';

फिर इसे अपनी css फ़ाइल में डालें:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

आप बस सेट कर सकते हैं :

button:focus {outline:0;}

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

Answer 21

मुझे बूटस्ट्रैप के साथ भी यही समस्या थी। मैंने रूपरेखा और बॉक्स-छाया दोनों के साथ हल किया

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}