বুটস্ট্র্যাপ বোতামটি ক্লিক করা হলে নীল রূপরেখা দেখায়

Question

আমি এটি যুক্ত করেছি তবে এখনও বোতামটি ক্লিক করা হলে নীল রূপরেখা উপস্থিত হয়।

.btn:focus {
  outline: none;
}

কীভাবে সেই কুৎসিত জিনিসটি সরিয়ে ফেলা যায়?

Comments

:activeবোতামটির জন্য সেট করার চেষ্টা করুন । অতিরিক্ত: সমস্যাটি খুঁজে পেতে আপনার ব্রাউজারে ইন্সপেক্টর ব্যবহার করুন ।

— অ্যাড্রিয়ান প্রাইস

আপনি কি আপনার বিট আরও কোড বা jsfiddle ডেমো পোস্ট করতে পারেন যাতে আমরা আপনাকে সহায়তা করতে পারি

— রিচা

বোতাম সম্পর্কে নিশ্চিত নয় তবে বুটস্ট্র্যাপ ইনপুট ক্ষেত্রগুলিতে বাক্স-ছায়া যুক্ত করে যা বাক্স-ছায়া দিয়ে সরানো যেতে পারে: কিছুই নয়;

— ডেভিডকন্ড্রে

FWIW, কীবোর্ড নেভিগেশনের জন্য ফোকাস স্টাইলিং গুরুত্বপূর্ণ।

— নাট হুইটেকার

একটি ছবি এখানে দরকারী হবে

— চিকেন স্যুপ

Answer 1

আপনার সম্পত্তিগুলি ওভাররাইড হয়ে যেতে পারে। !importantসক্রিয়: বরাবর আপনার কোডটিতে সংযুক্ত করার চেষ্টা করুন ।

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

বাক্স-ছায়া যুক্ত করুন কারণ অন্যথায় আপনি এখনও ছায়া বোতামটির চারপাশে দেখতে পাবেন।

যদিও এটি ব্যবহার করা ভাল অনুশীলন নয়! গুরুত্বপূর্ণ আমি আপনাকে আরও নির্দিষ্ট ক্লাস ব্যবহার করার পরামর্শ দিচ্ছি এবং তারপরে! গুরুত্বপূর্ণ ...

Comments

@ জনক তবে ওভাররাইড করার সময় কেন এটি প্রয়োজনীয়: সক্রিয়?

আমি এটিও যুক্ত করতে পারি! গুরুত্বপূর্ণ হওয়ার সাথে সিউডো-ক্লাসগুলি প্রয়োজন হয় না

আপনি যদি বুটস্ট্র্যাপ 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 দিয়ে ফায়ারফক্সের জন্য সমাধান করেছে

— শুভ

এই পোস্টটি ছায়া নয়, রূপরেখা সরানোর বিষয়ে। তাই দুঃখের বিষয়, এই মন্তব্যটি বিভ্রান্তিকর।

— ক্লে রেকর্ড 21

হ্যাঁ, এটি সর্বোত্তম উত্তর ছিল তবে কেন এটি অ্যালার্ট খারিজ ক্রস বোতামে গৃহীত হয় না

— নওরাজ

Answer 4

নীচে কোড চেষ্টা করুন

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

Comments

ক্রোম: বোতামের বাহ্যরেখাটি সরাতে আমার কেবল এই অংশটির প্রয়োজন ছিল: বোতাম: ফোকাস {আউটলাইন: কিছুই নয়}

— টিটিটি

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

বোতামের রূপরেখা অপসারণ করতে এখানে আমার বুস্ট্রাপ 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";

বুটস্ট্র্যাপের ভারগুলি '! ডিফল্ট' পতাকা সহ যায়।

$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/_variables.scss

Chears

Answer 17

a:focus {
  outline: none;
}

এটি BS3 এ আমার জন্য কাজ করে

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;
}

অথবা যদি বোতামটি ব্যাক-গ্রাউন্ড ছাড়াই ডিভের মতো কোনও উপাদানের ভিতরে থাকে তবে বাক্স-ছায়া যথেষ্ট।

#buttonId {
     box-shadow: none;
}

উদাহরণ: https://codepen.io/techednelson/pen/XRwgRB

Answer 24

আপনি যদি ৪.৩ বা তার বেশি সংস্করণ ব্যবহার করছেন তবে আপনার কোডটি সঠিকভাবে কাজ করবে না। এটিই আমি ব্যবহার করেছি। এটা আমার জন্য কাজ করেছে।

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

Comments

তুমি ঠিক বলছো. এটি ওয়েবেকিট-বাক্স-ছায়া ছাড়া কাজ করে না: গুরুত্বপূর্ণ! লাইন।

— আমির

Answer 25

বোতাম শ্রেণিতে ( .btn ) লক্ষ্যবস্তু করার পরিবর্তে , আমি এখানে নিজেই বোতামের উপাদানটিকে লক্ষ্য করি এবং এটি আমার পক্ষে কাজ করে।

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

এবং shadow-noneইনপুট ক্ষেত্রে শ্রেণি ব্যবহার করতে পারেন can

Answer 26

এখানে একটি নন-সিএসএস পদ্ধতি রয়েছে। JQuery ব্যবহার করে, যখনই উপাদানটি ক্লিক করা হবে কেবল তখনই "ফোকাস" শ্রেণিটি সরিয়ে ফেলুন।

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

এই পদ্ধতির ফলে সীমানাটি অস্তিত্বের দিকে ঝলকিয়ে উঠতে পারে এবং তারপরে সংক্ষিপ্তভাবে ফিরে আসতে পারে, যা আমার মতে খারাপ লাগে না (বোতামটি ক্লিক করার পরে এটি প্রতিক্রিয়াটির অংশ হিসাবে দেখায়)।

আমি .mousemove () ব্যবহার করার কারণটি হ'ল .ক্লিক () এবং .মাউসআপ () উভয়ই অকার্যকর প্রমাণিত।

Comments

নহি। সিএসএসকে পরাস্ত করতে আরও জাভাস্ক্রিপ্ট যুক্ত করা অনুশীলনের সেরা নয়। এই প্রোগ্রামটিতে।

— ডেভিড

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

সমস্ত উপাদানগুলির জন্য এসসিএসএস উপায় (কেবল বোতাম নয়):

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;
    }
  }
}