बूटस्ट्रैप बटन को क्लिक करने पर नीले रंग की रूपरेखा दिखाई देती है

Question

मैंने इसे जोड़ा लेकिन बटन क्लिक करने पर नीली रूपरेखा दिखाई देती है।

.btn:focus {
  outline: none;
}

उस बदसूरत चीज़ को कैसे निकालना है?

Comments

:activeबटन के लिए सेट करने का प्रयास करें। अतिरिक्त: समस्या को खोजने के लिए अपने ब्राउज़र में इंस्पेक्टर का उपयोग करें ।

— एड्रियन प्रीस

क्या आप अपना बिट कोड या jsfiddle डेमो पोस्ट कर सकते हैं ताकि हम आपकी मदद कर सकें

— ऋचा

बटन के बारे में निश्चित नहीं है, लेकिन बूटस्ट्रैप इनपुट फ़ील्ड में बॉक्स-छाया जोड़ता है जिसे बॉक्स-छाया के साथ हटाया जा सकता है: कोई नहीं;

— डेविडकॉन्ड्रे

एफडब्ल्यूआईडब्ल्यू, फोकस स्टाइल कीबोर्ड नेविगेशन के लिए महत्वपूर्ण है।

— नैट व्हिटेकर

यहाँ एक चित्र उपयोगी होगा

— चिकन सूप

Answer 1

हो सकता है कि आपके गुणों की अति हो रही हो। !importantसक्रिय के साथ-साथ अपने कोड को संलग्न करने का प्रयास करें ।

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

बॉक्स-छाया भी जोड़ें क्योंकि अन्यथा आप अभी भी बटन के चारों ओर छाया देखेंगे।

यद्यपि यह उपयोग करने के लिए एक अच्छा अभ्यास नहीं है! महत्वपूर्ण है कि मेरा सुझाव है कि आप अधिक विशिष्ट वर्ग का उपयोग करें और फिर महत्वपूर्ण के उपयोग के साथ सीएसएस लगाने का प्रयास करें ...!

Comments

@ जानक: जब अति आवश्यक है: सक्रिय क्यों?

मैं यह भी जोड़ सकता हूँ कि जब महत्वपूर्ण के साथ nuking, छद्म वर्गों आवश्यक नहीं हैं

यदि आप बूटस्ट्रैप 4 का उपयोग कर रहे हैं, box-shadow: noneतो -webkit-box-shadow: noneइस उत्तर में जोड़ें (और उपसर्ग न भूलें )। यह भी ध्यान दें कि बूटस्ट्रैप 4 पहले से ही .btn:focus { outline: none }अपने बीटीएन वर्गों में है।

— कूलनरोनी

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

— जोसेफ एन्गेलफ्रॉस्ट

Answer 2

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

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

Comments

इससे मुझे मदद मिली।

— वाक्

यदि आप यह सुनिश्चित करना चाहते हैं कि आप अपने सभी बटन मार रहे हैं, तो बस बटन का उपयोग करें {रूपरेखा: कोई नहीं! महत्वपूर्ण; बॉक्स-छाया: कोई भी महत्वपूर्ण नहीं; }

— आकर्षित किया

Answer 3

shadow-noneअक्षम box-shadow(नहीं outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ) के लिए अंतर्निर्मित बूस्टर क्लास हैं । यह बटन की छाया को हटाता है:

<button class='btn btn-primary shadow-none'>Example button</button>

Comments

बहुत बहुत धन्यवाद।

— निकोले टसेनकोव

यह सबसे अच्छा जवाब है

— jmrueda

यह वह उपाय है जिसकी आपको तलाश है। यही उपाय है, साथ चलो, साथ चलो। धन्यवाद इस ने इसे बूटस्ट्रैप 4 के साथ फ़ायरफ़ॉक्स के लिए हल किया

— 19

यह पोस्ट छाया को नहीं, बल्कि रूपरेखा को हटाने के बारे में है। इसलिए दुख की बात है कि यह टिप्पणी भ्रामक है।

— क्ले रिकॉर्ड्स

हां, यह सबसे अच्छा जवाब था, लेकिन इसे क्रॉस बटन को खारिज करने पर स्वीकार क्यों नहीं किया गया

— नवाज

Answer 4

नीचे दिए गए कोड का प्रयास करें

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

Comments

मुझे केवल क्रोम में आउटलाइन को हटाने के लिए इस हिस्से की आवश्यकता थी: बटन: फोकस {रूपरेखा: कोई नहीं;}

— TTT

Answer 5

यह मेरे लिए क्रोम में हो रहा था (हालाँकि फ़ायरफ़ॉक्स में नहीं)। मुझे पता चला है कि outlineसंपत्ति बूटस्ट्रैप द्वारा सेट की जा रही थी outline: 5px auto -webkit-focus-ring-color;। outlineबाद में मेरे कस्टम सीएसएस में संपत्ति को ओवरराइड करके हल किया गया:

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

Answer 6

यह एक पाठ के साथ बटन को हल करेगा, केवल एक आइकन बटन या बटन एक लिंक है:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

अगर आप जोड़ते हैं border:none !important;

{
    border:none !important;
    outline:none !important;
}

क्लिक करने पर बटन छोटा आकार का हो जाएगा।

Answer 7

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

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

Answer 8

बूटस्ट्रैप 4 में वे उपयोग box-shadow: 0 0 0 0px rgba(0,123,255,0);करते हैं: फोकस, सी आई ने मेरी समस्या का समाधान किया

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

Answer 9

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

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

उम्मीद है की यह मदद करेगा...

Answer 10

आपको उचित घोंसले के शिकार का उपयोग करने की आवश्यकता है और फिर उस पर शैलियों को लागू करें।

• बटन पर राइट क्लिक करें और इसका उपयोग करने के लिए सटीक वर्ग घोंसले के शिकार का पता लगाएं (फ़ायरफ़ॉक्स के लिए फायरबग का निरीक्षण तत्व), (क्रोम के लिए निरीक्षण तत्व)।

• कक्षा के पूरे समूह में शैली जोड़ें। तभी काम होगा

Answer 11

मैंने बटन क्लिक करने के बाद अपने मामले में इसे काफी उपयोगी पाया।

$('#buttonId').blur();

Answer 12

मैंने केवल सीमा की चौड़ाई हटाने का विकल्प चुना :focus। यह आउटलाइन और बटन के गोल कोनों के बीच की बदसूरत जगह को हटा देता है। किसी कारण से यह समस्या केवल वास्तविक बटन तत्वों पर होती है न कि <a class="btn">तत्वों पर।

button.btn:focus {
  border-width: 0;
}

Answer 13

यह मदद कर सकता है अगर किसी को अभी भी यह सवाल अनसुलझे हैं।

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

Answer 14

बटन की रूपरेखा निकालने के लिए यहां मेरा Boostrap 4 समाधान है

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

Answer 15

मेरे पास बस एक ही मुद्दा था और निम्नलिखित कोड ने मेरे लिए काम किया:

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

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

उम्मीद है कि यह मदद मिलेगी!

Comments

रूपरेखा! doh !! थुड

— एडम कॉक्स

Answer 16

वास्तव में बूटस्ट्रैप में सभी मामलों के लिए सभी चर को परिभाषित किया गया है। आपके मामले में आपको बस '_variables.scss' फ़ाइल से डिफ़ॉल्ट चर '$ इनपुट-बीटीएन-फ़ोकस-बॉक्स-शैडो' को ओवरराइड करना होगा। जैसे: $input-btn-focus-box-shadow: none; ध्यान दें कि आपको उस चर को अपने कस्टम '_yourCusomVarsFile.scss' में ओवरराइड करने की आवश्यकता है। और उस फाइल को पहले क्रम में प्रोजेक्ट में आयात किया जाना चाहिए और फिर बूटस्ट्रैप जैसे:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

बूटस्ट्रैप vars फ्लैग 'डिफ़ॉल्ट' के साथ जाता है।

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

इसलिए आपकी फ़ाइल में, आप डिफ़ॉल्ट मानों को ओवरराइड करेंगे। यहाँ चित्रण है:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

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

यहाँ रेपो से '_variable.scss' फ़ाइल है, जहाँ आप बूटस्ट्रैप से सभी प्रारंभिक मान पा सकते हैं: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_wariables.scss

Chears

Answer 17

a:focus {
  outline: none;
}

यह मेरे लिए बीएस 3 पर काम करता है

Answer 18

यह एक मेरे लिए बूटस्ट्रैप 4 में काम करता है:

.btn {border-color: transparent;}

Answer 19

प्रयत्न

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

Answer 20

ध्यान रखें, यदि आप बटन एंकर के अंदर हैं जैसे:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

शैली को बटन में जोड़ना ही पर्याप्त नहीं हो सकता है, आपको a:focus, a:active { outline: none }सीएसएस नियमों को जोड़ने की आवश्यकता हो सकती है जहां उपयुक्त (यह मेरे लिए काम किया)।

Answer 21

नीचे की कोशिश करो

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

Answer 22

कभी-कभी {outline: 0}समस्या हल नहीं हुई और हम कोशिश कर सकते हैं{box-shadow: none;}

Answer 23

मैं बूटस्ट्रैप 4 का उपयोग कर रहा हूं, आप आउटलाइन और बॉक्स-शैडो का उपयोग कर सकते हैं।

#buttonId {
    box-shadow: none;
    outline: none;
}

या यदि बटन बैक-ग्राउंड के बिना div की तरह एक तत्व के अंदर है, तो बॉक्स-छाया पर्याप्त है।

#buttonId {
     box-shadow: none;
}

उदाहरण: https://codepen.io/techednelson/pen/XRwgRB

Answer 24

यदि आप 4.3 या उच्चतर संस्करण का उपयोग कर रहे हैं, तो आपका कोड ठीक से काम नहीं करेगा। यही मैंने उपयोग किया है। इसने मेरे लिए काम किया।

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

Comments

आप सही हे। यह बिना -webkit- बॉक्स-छाया के बिना काम नहीं करता है: कोई भी महत्वपूर्ण नहीं है; लाइन।

— अमीर

Answer 25

बटन वर्ग ( .btn ) पर लक्षित करने के बजाय , यहां मैं बटन तत्व को लक्षित करता हूं और यह मेरे लिए काम करता है।

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

और shadow-noneइनपुट क्षेत्र के लिए वर्ग का उपयोग कर सकते हैं

Answer 26

यहाँ एक गैर-सीएसएस विधि है। JQuery का उपयोग करते हुए, जब भी तत्व को क्लिक किया गया है, बस "फ़ोकस" वर्ग को हटा दें।

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

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

मैंने जो .mousemove () का उपयोग किया है उसका कारण है .click () और .mouseup () दोनों ही अप्रभावी साबित हुए हैं।

Comments

NEH। सीएसएस को हराने के लिए और अधिक जावास्क्रिप्ट जोड़ें प्रथाओं का सबसे अच्छा नहीं है। IMHO।

— डेविड

Answer 27

इन मूल्यों को बदलते हुए मेरे लिए काम किया। मुझे यह क्रोम के डेवलपर टूल को देखकर मिला

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

यह बटन की छाया को भी बनाए रखता है, यह केवल बटन के रंग को ऑन-क्लिक में बदल देता है।

Answer 28

सटीक बूटस्ट्रैप कथनों को ओवरराइड करें:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

Answer 29

बॉर्डर कलर को वापस ग्रे में बदलें

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

Answer 30

सभी तत्वों के लिए SCSS तरीका (केवल बटन नहीं):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}