क्लिक पर बटन के चारों ओर फोकस कैसे हटाएं

Question

मेरे बटन पर क्लिक करने के बाद उनके चारों ओर एक हाइलाइट है। यह क्रोम में है।

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

मैं एक थीम के साथ बूटस्ट्रैप का उपयोग कर रहा हूं, लेकिन मुझे पूरा यकीन है कि ऐसा नहीं है: मैं पहले किसी अन्य प्रोजेक्ट पर यह देख रहा था।

अगर मैं <a>इसके बजाय टैग का उपयोग करता हूं तो यह दूर हो जाता है <button>। क्यों? अगर मैं उपयोग करना चाहता था तो मैं <button>इसे कैसे दूर कर दूंगा?

Comments

रूपरेखा: 0; आपकी रुचि हो सकती है

— विगलेर जटाग

क्या क्लिक के बाद कोई क्लास जोड़ी जा रही है?

— कुजगुन

रूपरेखा: 0 मदद करने के लिए प्रतीत नहीं होता है, न ही वेबकिट-उपस्थिति

— शॉन क्लार्क हेस

28 जवाब सभी इस समस्या के आसपास काम करने के लिए अलग-अलग तरीकों का सुझाव देते हुए आज सामने के अंत में वेब विकास की क्षमा करने के लिए वसीयतनामा है।

— डेल्टाइन

इस एक्सेसिबिलिटी फीचर को समस्या मानने वाले लोग आज फ्रंट एंड वेब डेवलपमेंट की सॉरी स्थिति का वसीयतनामा है।

— क्वेंटिन

Answer 1

मुझे यह क्यू और ए दूसरे पृष्ठ पर मिला, और बटन फोकस शैली को ओवरराइड करने से मेरे लिए काम किया। यह समस्या क्रोम के साथ MacOS के लिए विशिष्ट हो सकती है।

.btn:focus {
  outline: none;
  box-shadow: none;
}

ध्यान दें कि यह पहुंच के लिए निहितार्थ है और आपको तब तक सलाह नहीं दी जाती है जब तक कि आपके बटन और इनपुट के लिए एक अच्छा सुसंगत फ़ोकस स्थिति न हो। नीचे दी गई टिप्पणियों के अनुसार, ऐसे उपयोगकर्ता हैं जो चूहों का उपयोग नहीं कर सकते हैं।

Comments

मैं भी इस बारे में सोचा, लेकिन रूपरेखा को हटाने से सुगमता की समस्या नहीं है?

— साइलोन

मुझे लगता है कि हमारे पास कोई और विकल्प नहीं है। आप .btn:active:focusइसे सक्रिय स्थिति से हटाने के लिए चयनकर्ता को भी जोड़ सकते हैं।

— साइलोन

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

— मर्फी रानले

भविष्य के यात्रियों के लिए, यह कोड पूरी तरह से डिफ़ॉल्ट बटन (सभी बटन नहीं) के लिए सभी बटन राज्यों पर सभी शैलियों को बदल देता है:.btn-default, .btn-default:hover, .btn-default:active, .btn-default:active:focus, .btn-default:visited, .btn-default:focus { color: #dcdcdc; background-color: #232323; outline: none; }

— जियोर्डी

अगर बूटस्ट्रैप वैरिएबल में निर्मित का उपयोग किया जाता है, तो कोई भी इन दो वेरिएंट्स को सेट करके इसे प्राप्त कर सकता है: $ btn-focus-width: 0; $ btn फोकस बॉक्स-छाया: कोई नहीं;

— बुलेटट्रेन

Answer 2

आप कुछ इस तरह चाहते हैं:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.Blur () विधि सही ढंग से फोकस हाइलाइटिंग को हटा देती है और बूटस्ट्रैप की शैलियों को गड़बड़ नहीं करती है।

Comments

यह एक संक्षिप्त क्षण के लिए रूपरेखा प्रदर्शित करता है, जो अभी भी इसे बर्बाद करता है: /

— साइलवेन

यदि मुझे क्लिक ईवेंट के बजाय फ़ोकस इवेंट को ट्रिगर करने पर कोई फ़्लिकर नहीं दिखाई देता है।

— चार्ल्स

यह महान काम किया! अगर मैं एक ही बटन पर एक अलग क्लिक () ईवेंट हैंडलर (यानी जब आप क्लिक किए गए बटन पर क्लिक करते हैं तो कोड निष्पादित करता है) को अटैच करने की कोशिश कर रहा हूं तो क्या संभावित समस्याएं होंगी?

— Nils_e

अगर कोई यहाँ सोच रहा है अगर यह बूटस्ट्रैप v4 में काम करता है, तो यह करता है। 2018 में अभी भी मान्य उत्तर, चीयर्स!

— Jreed

क्या यह शीर्ष-मत वाले प्रश्न की तुलना में पहुँच-ठीक है?

— चार्ल्सएम

Answer 3

मैं समझता हूँ कि फोकस पहले निम्नलिखित लागू किया जाता है onMouseDown, घटना तो बुला e.preventDefault()में onMouseDownएक साफ अपनी आवश्यकताओं पर निर्भर करता है समाधान हो सकता है। यह निश्चित रूप से एक पहुँच अनुकूल समाधान है, लेकिन स्पष्ट रूप से यह माउस क्लिक के व्यवहार को समायोजित करता है जो आपके वेब प्रोजेक्ट के साथ संगत नहीं हो सकता है।

मैं वर्तमान में इस समाधान का उपयोग कर रहा हूं (एक react-bootstrapपरियोजना के भीतर ) और मुझे एक क्लिक के बाद फ़्लिकर या फ़ोकस का फ़ोकस प्राप्त नहीं होता है, लेकिन मैं अभी भी अपना ध्यान केंद्रित करने में सक्षम हूं और समान बटनों के फ़ोकस को नेत्रहीन रूप से विज़ुअलाइज़ करता हूं।

Comments

हाँ। आपका समाधान काम करता है। पारितोषिक के लिए धन्यवाद। यहाँ समाधान के लिए फिडेल है । लेकिन इसके लिए हर बटन के साथ एक जावास्क्रिप्ट हैंडलर संलग्न होना चाहिए। यह बहुत अच्छा होगा अगर हम इसे सीएसएस केवल समाधान के माध्यम से प्राप्त कर सकते हैं।

— गालेल भाशा

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

— माइकल टोंटचेव

स्निपेट के लिए ब्राउज़ करने वाले किसी भी व्यक्ति के लिए यह काम करना चाहिए और उसे संरक्षित करना चाहिए:onMouseDown={e => e.preventDefault()}

— एडम के डीन

यह स्पेस बार और रिटर्न कुंजी को "क्लिक" बटन से रोकता है। शायद एक और अधिक पूर्ण समाधान के साथ इसे वापस जोड़ना है onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}:।

— jfbloom22

आपको onKeyUpईवेंट के अंदर e.preventDefault () नहीं बुलाना चाहिए । यह पता चला है कि यदि आप ऐसा करते हैं, तो बटन अंतरिक्ष कुंजी या रिटर्न कुंजी को हिट करने और कहीं भी क्लिक करने या क्लिक करने के बाद केंद्रित रहता है।

— jfbloom22

Answer 4

विश्वास नहीं कर सकता कि किसी ने भी इसे अभी तक पोस्ट नहीं किया है।

एक बटन के बजाय एक लेबल का उपयोग करें।

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

बेला

Comments

यह अधिकांश उपयोगकर्ताओं के लिए ठीक काम करता है, लेकिन यह विधि स्क्रीन पाठकों, या कीबोर्ड के अनुकूल नहीं है और यह अंधे उपयोगकर्ताओं, और समझौता किए गए मोटर कौशल वाले उपयोगकर्ताओं को छोड़ देगा, बटन के साथ बातचीत करने में असमर्थ।

— मर्फी रैंडल

1. लेबल को <a> टैग से बदलें। ताकि कीबोर्ड के माध्यम से इसकी पहुंच हो सके। 2. स्क्रीन रीडर उपयोगकर्ता की पहुंच में सुधार के लिए aria-role = "बटन" जोड़ें। अपडेटेड

— फिडेल

अच्छा समाधान, मेरी मदद की, लेकिन किसी भी तरह कोणीय निर्देश के लिए काम नहीं करता है, यहां तक ​​कि एक आवरण के साथ भी, जैसे<a class="btn"><my-directive/></a>

— ya_dimon

गैर-चूहों उपयोगकर्ताओं के लिए लेबल पूरी तरह से छोड़ दिया जाता है जब चारों ओर टैब करना, पहुंच के लिए बुरा है

— फेलिप जून

बूटस्ट्रैप 4 में यह बटन के रूप को बदलने लगता है।

— जेसन किम

Answer 5

हालाँकि यह सभी केंद्रित बटन के लिए रूपरेखा को निकालना आसान है (जैसा कि user1933897 के उत्तर में ), लेकिन यह समाधान एक्सेसिबिलिटी के दृष्टिकोण से खराब है (उदाहरण के लिए, ब्राउज़र की डिफ़ॉल्ट फोकस रूपरेखा के साथ स्टॉप मेसिंग देखें) )

दूसरी ओर, अपने ब्राउज़र को अपने क्लिक किए गए बटन को स्टाइल करने से रोकना असंभव है, क्योंकि अगर वह सोचता है कि यह उस पर क्लिक करने के बाद केंद्रित है (तो मैं आपको देख रहा हूं, क्रोम ऑन ओएस एक्स)।

तो हम क्या कर सकते हैं? एक दो विकल्प मेरे दिमाग में आते हैं।

1) जावास्क्रिप्ट (jQuery): $('.btn').mouseup(function() { this.blur() })

आप बटन क्लिक करने के तुरंत बाद किसी भी बटन के आसपास के फोकस को हटाने के लिए अपने ब्राउज़र को निर्देश दे रहे हैं । इसके mouseupबजाय clickहम कीबोर्ड-आधारित इंटरैक्शन के लिए डिफ़ॉल्ट व्यवहार रख रहे हैं ( mouseupकीबोर्ड द्वारा ट्रिगर नहीं होता है)।

2) सीएसएस: .btn:hover { outline: 0 !important }

यहां आप केवल होवर किए गए बटनों की रूपरेखा बंद करते हैं। जाहिर है कि यह आदर्श नहीं है, लेकिन कुछ स्थितियों में पर्याप्त हो सकता है।

Comments

नंबर 1 एक उपयोगी टिप है। बटन दबाए जाने पर यह फ़ोकस को अक्षम कर देगा, हालाँकि यह इसे दबाए जाने के दौरान प्रदर्शित करेगा। मैंने क्लिक किए गए सक्रिय तत्व पर ध्यान केंद्रित किया है :active:focus {outline:none;}।

— निश्चित रूप से

ईवेंट श्रोताओं को बांधने वाले शॉर्टहैंड कार्य jQuery में चित्रित किए जाते हैं, इसलिए यदि आप .on('mouseup', function() { ... })इसके बजाय उपयोग करते हैं तो यह बेहतर है.mouseup()

— क्रेज़ी रेडड

Answer 6

इसने मेरे लिए काम किया। मैंने एक कस्टम क्लास बनाया जो आवश्यक CSS को ओवरराइड करता है।

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Chrome और सफारी ब्राउज़र के लिए -webkit-box-shadow काम करेगी।

Comments

मेरे लिए काम करता है लेकिन मुझे border: none !important;समान आयामों को बनाए रखने के लिए बटन को हटाना पड़ा

— Emeka Mbah

मुझे लगता है कि काम नहीं किया गया था, लेकिन "बॉक्स-छाया: कोई नहीं! महत्वपूर्ण!" मेरे लिए इसका काम धन्यवाद @ मीनाका

— ज़ाफ़ वार्म

Answer 7

यह मेरे लिए काम करता है, एक और समाधान का उल्लेख नहीं किया गया है। बस इसे क्लिक इवेंट में फेंक दें ...

$(this).trigger("blur");

या किसी अन्य घटना / विधि से इसे कॉल करें ...

$(".btn_name").trigger("blur");

Comments

इसके साथ समस्या यह है कि जब एक कीबोर्ड उपयोगकर्ता बटन पर क्लिक करता है (तब इसे दबाकर अंतरिक्ष को दबाता है) तो यह फोकस खो देता है। फिर आपको जहाँ भी आप थे, वापस सभी तरह से टैब करना होगा। 😡

— तामलिन

Answer 8

यदि आप :focus { outline: none; }रूपरेखा को हटाने के लिए नियम का उपयोग करते हैं , तो लिंक या नियंत्रण फ़ोकस करने योग्य होगा, लेकिन कीबोर्ड उपयोगकर्ताओं के लिए फ़ोकस का कोई संकेत नहीं होगा। जेएस की तरह इसे हटाने के तरीकेonfocus="blur()" भी बदतर हैं और इसके परिणामस्वरूप कीबोर्ड उपयोगकर्ता नियंत्रण के साथ बातचीत करने में असमर्थ होंगे।

आप जिस हैक का उपयोग कर सकते हैं, वह ठीक है , जिसमें :focus { outline: none; }उपयोगकर्ता के माउस के साथ इंटरैक्ट करने और कीबोर्ड इंटरेक्शन का पता चलने पर उन्हें फिर से हटाने के नियम शामिल हैं । लिंडसे इवांस ने इसके लिए एक दायित्व बनाया है: https://github.com/lindsayevans/outline.js

लेकिन मैं html या बॉडी टैग पर क्लास लगाना पसंद करूंगा। और इसका उपयोग करने के लिए सीएसएस फ़ाइल में नियंत्रण है।

उदाहरण के लिए (इनलाइन ईवेंट हैंडलर केवल प्रदर्शन उद्देश्यों के लिए है):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

मैंने togheter को एक पेन दिया: http://codepen.io/snobojohan/pen/RWXXmp

लेकिन सावधान रहें कि प्रदर्शन के मुद्दे हैं। यह हर बार उपयोगकर्ता को माउस और कीबोर्ड के बीच स्विच करने पर मजबूर करता है। अनावश्यक पेंट से बचने के बारे में अधिक जानकारी के लिए http://www.html5rocks.com/en/tutorials/speed/unn जरूरी-painms /

Answer 9

मैंने वही देखा है और भले ही यह वास्तव में मुझे गुस्सा दिलाता है, मेरा मानना ​​है कि इसे संभालने का कोई उचित तरीका नहीं है।

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

इससे बचना चाहिए!

.btn:focus {
  outline: none;
}

Comments

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

— apocalypz

Answer 10

मैं एक उपाय खोजता हूं। जब हम ध्यान केंद्रित करते हैं, तो बूटस्ट्रैप बॉक्स-शैडो का उपयोग करते हैं, इसलिए हम इसे अक्षम करते हैं (पर्याप्त प्रतिष्ठा नहीं, छवि अपलोड नहीं कर सकते :()।

मैं जोड़ना

.btn:focus{
    box-shadow:none !important;
}

यह काम करता हैं।

Answer 11

विकल्प 1: :focus-visibleछद्म वर्ग का उपयोग करें

:focus-visibleछद्म वर्ग (स्पर्श या माउस क्लिक के माध्यम से यानी) भद्दे रूपरेखा को मारने और उन कुंजीपटल के माध्यम से नेविगेट नहीं कर रहे हैं कि के लिए बटन और विभिन्न तत्वों पर ध्यान केंद्रित करने के छल्ले इस्तेमाल किया जा सकता।

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

चेतावनी: 2020 तक, :focus-visibleछद्म वर्ग ब्राउज़रों में व्यापक रूप से समर्थित नहीं है । हालांकि पॉलीफिल का उपयोग करना बहुत आसान है; नीचे निर्देश देखें।

विकल्प 2: .focus-visibleपॉलीफिल का उपयोग करें

यह समाधान ऊपर उल्लेखित छद्म वर्ग के बजाय एक सामान्य सीएसएस वर्ग का उपयोग करता है, और इसमें व्यापक ब्राउज़र समर्थन है क्योंकि यह एक आधिकारिक जावास्क्रिप्ट-आधारित पॉलीफ़िल है ।

चरण 1: अपने HTML पृष्ठ पर जावास्क्रिप्ट निर्भरता जोड़ें

ध्यान दें: फ़ोकस-दृश्यमान पॉलीफ़िल को कई पुराने ब्राउज़रों के लिए एक अतिरिक्त पॉलीफ़िल की आवश्यकता होती है जो क्लासिस्ट का समर्थन नहीं करते हैं :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

चरण 2: अपनी स्टाइलशीट में निम्नलिखित सीएसएस जोड़ें

निम्नलिखित सीएसएस समाधान का एक संशोधित संस्करण है जो ऊपर और अधिक अच्छी तरह से प्रलेखित है।

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

चरण 3 (वैकल्पिक): जहां आवश्यक हो, 'फ़ोकस-दृश्यमान' वर्ग का उपयोग करें

यदि आपके पास कोई आइटम है जहां आप वास्तव में फोकस रिंग दिखाना चाहते हैं जब कोई क्लिक करता है या स्पर्श का उपयोग करता है, तो बस focus-visibleक्लास को DOM तत्व में जोड़ें।

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

संसाधन:

• https://css-tricks.com/keyboard-only-focus-styles/

डेमो:

• https://wicg.github.io/focus-visible/demo/

Comments

लेकिन अगर क्रोम अभी भी इसका समर्थन नहीं करता है, तो शायद यह सबसे अच्छा समाधान नहीं है (अभी के लिए)

— एलिजा मॉक

इसके बजाय आप क्या सुझाव देते हैं?

— जेम्सविलसन

जब तक यह समाधान अधिक मानकीकृत न हो जाए, तब तक अन्य उत्तर की तरह रूपरेखा को छिपाएं

— एलिजा मॉक

मेरी चीजों को पढ़ने से, अगर पहुंच एक चिंता का विषय है, तो आउटलाइन कार्टे ब्लांच को छिपाना <whatever>:focus { outline: none }इस समाधान से भी बदतर विचार है। वास्तव में एक्सेसिबिलिटी कम्युनिटी के लोग हैं जो आपको कभी आउटलाइन हटाने की जगह देते हैं और इसके बजाय सब कुछ है: फोकस स्टाइल (या तो आउटलाइन या बॉक्स-शैडो), और समर्थन नहीं करना चाहते हैं: फोकस-तब तक दिखाई देता है जब तक कि ब्राउजर एक तरह से लागू न होने दें उपयोगकर्ता सभी मदों पर ध्यान देने योग्य होना चाहिए या नहीं, इस पर उपयोगकर्ता वरीयता निर्दिष्ट करते हैं। मुझे यह सोचना पसंद है: फ़ोकस-दृश्य डिजाइन चिंताओं और a11y के बीच एक खुशहाल माध्यम है।

— जेम्सविलसन

Answer 12

यदि उपरोक्त आपके लिए काम नहीं करता है, तो यह कोशिश करें:

.btn: फ़ोकस {आउटलाइन: कोई नहीं; बॉक्स-शैडो: कोई नहीं; बॉर्डर: 2 पीएक्स सॉलिड ट्रांसपेरेंट;}

जैसा कि user1933897 ने बताया, यह क्रोम के साथ MacOS के लिए विशिष्ट हो सकता है।

Comments

अभी भी यह मान्य है जब उपयोग किया जाता है bootstrap 4.0- खिड़कियों में

— जीडब्ल्यूबीट्रेन

Answer 13

देर से, लेकिन कौन जानता है कि यह किसी की मदद कर सकता है। सीएसएस जैसा दिखेगा:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML जैसा दिखेगा:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

इस तरह आप btn रख सकते हैं और यह संबद्ध व्यवहार है।

Comments

element:focus { box-shadow: none; }नीली रूपरेखा / छाया हटा दिया गया।

— user435421

Answer 14

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

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

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

Comments

यह मेरे लिए चाल का आधा हिस्सा था। मैं रिएक्ट और रिएक्ट-बूटस्ट्रैप का उपयोग कर रहा हूं। क्लिक करने के बाद, बटन इसके चारों ओर एक चमक के साथ हाइलाइट किया गया था। E.target.blur () जोड़ना; चमक को हटाता है, लेकिन बटन एक अलग रंग रहता है।

— पिक्सेलविज़ सिप

Answer 15

अंदाज

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

का उपयोग करते हुए

<button class="btn btn-primary not-focusable">My Button</button>

Comments

यह समाधान अन्य उत्तरों से कैसे भिन्न है?

— अपाला

केवल एक छोटा सा अंतर है - आप उन तत्वों के लिए ध्यान केंद्रित कर सकते हैं जिन्हें आपको सभी बटन, लिंक आदि के व्यवहार को

— अनदेखा

Answer 16

बटन के चारों ओर सीमा हटाने के लिए इस समाधान का प्रयास करें। इस कोड को css में जोड़ें।

प्रयत्न

button:focus{
outline:0px;
}

यदि काम नहीं करता है तो नीचे उपयोग करें।

button:focus{
 outline:none !important;
 }

Comments

दूसरा एक भी प्रतिक्रिया सामग्री यूआई बटन के साथ काम करता है

— गीक गाइ

Answer 17

ऐसा करने के लिए शुद्ध css तरीका चाहने वाले लोगों के लिए:

:focus:not(:focus-visible) { outline: none }

यह लिंक वगैरह के लिए भी काम कर सकता है और बोनस, यह कीबोर्ड की पहुंच को बनाए रखता है। अंत में यह उन ब्राउज़रों द्वारा अनदेखा किया जाता है जो समर्थन नहीं करते हैं: फ़ोकस-दृश्य

Comments

यह केवल डेवलपर

— जस्टिन कहन

focus-visibleअब एक आधिकारिक पॉलीफ़िल है। इस सवाल पर मेरा जवाब stackoverflow.com/a/60219624/413538 वास्तव में यह सब कैसे समझ में आता है पर विस्तार से बताता है।

— जेम्सविलसन

Answer 18

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

इसके लिए समर्थन outline-styleकरना मुश्किल है क्योंकि ब्राउज़र को यह तय करना है कि इसका क्या मतलब है। कुछ ब्राउज़रों में जाँच करने और गिरने के नियम का सबसे अच्छा।

Answer 19

एक अन्य संभावित समाधान एक जावास्क्रिप्ट श्रोता का उपयोग करके एक वर्ग जोड़ना है जब उपयोगकर्ता बटन पर क्लिक करता है और फिर उस श्रोता के साथ फोकस पर उस वर्ग को हटा देता है। जब क्लिक किया जाता है तो एक बटन पर ध्यान केंद्रित करने पर क्रोम के विचित्र व्यवहार को रोकने के लिए यह एक्सेसिबिलिटी (दृश्य सारणी) को बनाए रखता है।

जे एस:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

सीएसएस:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

पूरा उदाहरण यहाँ: https://jsfiddle.net/4bbb37fh/

Comments

क्लिक के बजाय माउसडाउन का उपयोग करें। माउस को दबाए जाने पर (इसे जारी किए बिना) आरंभिक रूपरेखा पर क्लिक करें।

— विंसेंट होच-

Answer 20

यह काम है, मुझे आशा है कि आप मदद करेंगे

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

Comments

.btn: फोकस में एक्सेसिबिलिटी के लिए रूपरेखा होनी चाहिए (जब

— टैबिंग हो

Answer 21

.btn:focus:active {
  outline: none;
}

यह क्लिक पर रूपरेखा को हटा देता है, लेकिन टैब करते समय ध्यान केंद्रित रखता है (a11y के लिए)

Comments

यह केवल माउस डाउन पर आउटलाइन को हटाता है। माउस ऊपर जाने के बाद, रूपरेखा प्रकट होती है।

— वेलसप्रिंग

Answer 22

यह सबसे अच्छा काम करता है

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

Answer 23

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

यह रूपरेखा: कोई भी बटन और टैग दोनों के लिए काम नहीं करेगा

Comments

यह प्रश्न का उत्तर कैसे देता है? कृपया कुछ अन्वेषण जोड़ें।

— आंद्रे कूल

Answer 24

इसे CSS में जोड़ें:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Answer 25

मैंने पाया कि आपके सीएसएस कोड में बस एक पंक्ति नीचे दी गई है।

button:focus { outline: none }

Answer 26

मुझे "संक्रमण" घटना को ट्रिगर करने के लिए बटन का उपयोग करते समय मैकओएस और क्रोम पर बस यही समस्या थी। यदि यह पढ़ने वाला कोई व्यक्ति पहले से ही एक इवेंट श्रोता का उपयोग कर रहा है, तो आप इसे .blur()अपने कार्यों के बाद कॉल करके हल कर सकते हैं ।

उदाहरण:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

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

Answer 27

आप सेट कर सकते हैं tabIndex="-1"। जब आप TAB पर ध्यान केंद्रित करने वाले नियंत्रणों के माध्यम से इस बटन को छोड़ देंगे तो यह ब्राउजर बना देगा।

यहां सुझाए गए अन्य "फ़िक्सेस", केवल फ़ोकस आउटलाइन हटाते हैं, लेकिन फिर भी बटन टैबेबल होते हैं। हालाँकि, उपयोग की दृष्टि से, आपने पहले ही चमक हटा दी है, इसलिए आपका उपयोगकर्ता यह नहीं जान पाएगा कि वर्तमान में केंद्रित बटन, किसी भी तरह से है।

दूसरी ओर, बटन को गैर-सारणी बनाने योग्य पहुंच के निहितार्थ होते हैं।

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

Answer 28

यदि आप एक वेबकिट ब्राउज़र का उपयोग कर रहे हैं (और संभावित रूप से वेबकिट विक्रेता के साथ संगत ब्राउज़र जो उपसर्ग कर रहा है), तो वह रूपरेखा बटन के -webkit-focus-ringछद्मपत्र से संबंधित है। बस इसे सेट outlineकरें none:

*:-webkit-focus-ring {
  outline: none;
}

(हालांकि कुछ क्रोम शैलियों न सिर्फ एक MacOS बात, क्रोम इस तरह के एक वेबकिट ब्राउज़र है, और इस आशय लिनक्स भी पर होता हैं MacOS केवल)

Answer 29

मुझे <a>बटन के रूप में अभिनय करने में समान समस्या हो रही थी और मुझे पता चला कि मुझे एटीआर जोड़कर वर्कअराउंड याद आ रहा था,type="button" यह सामान्य रूप से मेरे लिए कम से कम व्यवहार करता है।

<a type="button" class="btn btn-primary">Release Me!</a>

Comments

इस पर typeविशेषता का कोई प्रभाव नहीं होना चाहिए, और इसके buttonलिए एक अमान्य मूल्य है। यह विशेषता एक MIME प्रकार को स्वीकार करती है और क्लाइंट को बताती है कि यदि उसे लिंक का अनुसरण करना हो तो उसे किस प्रकार का डेटा प्राप्त करना चाहिए (उदाहरण <a type="application/pdf" ...>के लिए

— Quentin

@ क्वेंटिन धन्यवाद। हां मुझे इसकी जानकारी है। मैंने शुरुआत की role="button"लेकिन यह सिर्फ काम नहीं किया ( <button>इसके बजाय उपयोग करने के बाद <a>)। मेरे कार्यान्वयन ने विशेष रूप से मांग की <a>और नहीं <button>। इसलिए बहुत छेड़छाड़ करने के बाद, मैंने इस वर्कअराउंड (सबसे शायद बीएस बग) की खोज की!

— spcsLrg

Answer 30

सीधे html टैग में (ऐसे परिदृश्य में जहाँ आप बूटस्ट्रैप थीम को अपने डिज़ाइन में कहीं और छोड़ना चाहते हैं) ..

प्रयास करने के लिए उदाहरण ..

<button style="border: transparent;">

<button style="border: 1px solid black;">

..ect ,. इच्छित प्रभाव के आधार पर।