Chrome এর CSS কাস্টম-স্টাইলযুক্ত বোতাম থেকে নীল সীমানা সরান Remove

Question

আমি একটি ওয়েব পৃষ্ঠায় কাজ করছি এবং আমি কাস্টম-স্টাইলযুক্ত <button>ট্যাগগুলি চাই। CSS এর সঙ্গে সুতরাং, আমি বললাম, border: none। এখন এটি সাফারিতে পুরোপুরি কাজ করে, তবে ক্রোমে, আমি যখন কোনও বোতামে ক্লিক করি, তখন এটি চারপাশে বিরক্তিকর নীল সীমানা রাখে। আমি ভেবেছি button:active { outline: none }বা button:focus { outline:none }কাজ করবে, কিন্তু না। কোন ধারনা?

ক্লিক করার আগে এটি দেখতে দেখতে এটির মতো দেখাচ্ছে (এবং আমি কীভাবে এটি ক্লিক করার পরে দেখা উচিত):

এবং এই সেই সীমান্তের বিষয়ে আমি কথা বলছি:

এখানে আমার সিএসএস:

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

— ডেভিডপলজুনিয়র

এটি আপনার ডেমোতে কেন কাজ করে তা আমি নিশ্চিত নই .. এটি এটি এখানে করছে: jsfiddle.net/NgL8H @ ডেভিডপৌলজুনিয়ার

— eshellborn

আমি নীচে ফোকাসের নিয়মটি যুক্ত করেছি যা আপনি বলেছিলেন যে এটি কার্যকর হয়নি, তবে এটি বলে মনে হচ্ছে: jsfiddle.net/NgL8H/1

— ডেভিডপলজুনিয়র

আপনার রূপরেখা সম্পূর্ণরূপে মুছে ফেলা উচিত নয় - প্রতিবন্ধী - এবং আমার মতো যারা প্রায়শই কীবোর্ডটি দ্রুত ব্যবহার করেন কারণ এটি নেভিগেট করার প্রয়োজন। আপনার পছন্দের কিছুটির রূপরেখাটি পুনরায় স্টাইল করা আরও ভাল।

— ক্রিস বি

outline: noneআপনি অ্যাক্সেসযোগ্যতার ক্ষয়টি প্রতিস্থাপন করতে প্রস্তুত না হলে দয়া করে এটি সেট করবেন না । : এই ওয়েবসাইট দেখুন outlinenone.com

— Flimm

Answer 1

এটি করার পরামর্শ দেওয়া হয় না কারণ এটি আপনার সাইটের অ্যাক্সেসিবিলিটি নিয়ন্ত্রণ করে; আরও তথ্যের জন্য, এই পোস্টটি দেখুন ।

এটি বলেছে, আপনি যদি জেদ করেন তবে এই সিএসএসের কাজ করা উচিত:

button:focus {outline:0;}

এটি দেখুন বা জেএসফিডাল: 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;উচিত নয়?

— হেনরিউইট

@ হেনরিউইট ওয়েল, ওপি চেষ্টা করেছিল এবং তার পক্ষে কাজ করে নি।

— ডায়োসনি

দয়া করে এটি কখনই করবেন না। আপনার সামান্য অভিযোগটি বিশাল অ্যাক্সেসিবিলিটি ইস্যু থেকে অপ্রাসঙ্গিক এটি হয়ে যায়

— ফাজেই

এটি সম্পূর্ণরূপে আড়াল করার পরিবর্তে আপনার অবশ্যই এটি পুনরায় স্টাইল করা উচিত। এই ক্ষেত্রে, button:focus{ outline-color: #A75000 }সূচকটি লুকানোর পরিবর্তে এমন কিছু চেষ্টা করুন ... আপনি এটি স্টাইলের সাথে মানানসই একটি গা dark় কমলাতে পরিবর্তন করেছেন।

— ক্লাউডওয়ার্কস

@ সানও ব্রায়ান মঞ্জুর করেছেন যে ওপি'র দেওয়া পরিস্থিতি এমন কোনও সাইটের জন্য হতে পারে যা 5 জন ব্যবহারকারীর, সমস্ত সক্ষম বডিয়ড। তবে সম্ভবত 1123 জন ব্যক্তি যারা এটিকে সমর্থন করেছেন তাদের বেশিরভাগই মনে করেন যে তাদের প্রদত্ত পরিস্থিতির জন্য জিনিসগুলি করা এটি সঠিক উপায় তবে বাস্তবে এটি বৈষম্যমূলক নয়।

— অ্যালেক্সারগণ

Answer 2

অপেক্ষা কর সেই কুৎসিত রূপরেখার কারণ আছে!

সেই কুৎসিত নীল রূপরেখা সরানোর আগে আপনি অ্যাক্সেসিবিলিটি বিবেচনায় নিতে চাইতে পারেন । ডিফল্টরূপে, সেই নীল রূপরেখা ফোকাসযোগ্য উপাদানগুলিতে স্থাপন করা হয়। এটি এমন যে যাতে অ্যাক্সেসযোগ্যতার সমস্যা রয়েছে ব্যবহারকারীরা এটিতে ট্যাব করে সেই বোতামটি ফোকাস করতে সক্ষম হন। কিছু ব্যবহারকারীর মাউস ব্যবহার করার জন্য মোটর দক্ষতা নেই এবং কম্পিউটারের মিথস্ক্রিয়ার জন্য অবশ্যই কেবল কীবোর্ড (বা অন্য কোনও ইনপুট ডিভাইস) ব্যবহার করতে হবে। আপনি যখন নীল রূপরেখা সরিয়ে ফেলেন, তখন কোন উপাদানটি ফোকাস করছে সে সম্পর্কে ভিজ্যুয়াল সূচক আর থাকবে না। আপনি যদি নীল রূপরেখা সরিয়ে ফেলতে চলেছেন তবে আপনার এটিকে অন্য ধরণের ভিজ্যুয়াল ইঙ্গিত দিয়ে প্রতিস্থাপন করা উচিত যে বোতামটি ফোকাসযুক্ত।

সম্ভাব্য সমাধান: ফোকাস করার সময় গাark় বোতামগুলি

নীচের উদাহরণগুলির জন্য, ব্যবহার করে প্রথমে ক্রোমের নীল রূপরেখা সরানো হয়েছিল button:focus { outline:0 !important; }

আপনার সাধারন বুটস্ট্র্যাপ বোতামগুলি এগুলি প্রদর্শিত হয়:

ফোকাস গ্রহণ করার সময় এখানে বোতামগুলি রয়েছে:

বোতামগুলি যখন টিপানো হয় তা এখানে:

আপনি দেখতে পাচ্ছেন, ফোকাস পাওয়ার পরে বোতামগুলি কিছুটা গাer় হয়। ব্যক্তিগতভাবে, আমি ফোকাসযুক্ত বোতামগুলিকে আরও গা making় করার সুপারিশ করব যাতে ফোকাসের অবস্থা এবং বোতামের স্বাভাবিক অবস্থার মধ্যে খুব লক্ষণীয় পার্থক্য থাকে।

এটি কেবল অক্ষম ব্যবহারকারীদের জন্য নয়

আপনার সাইটকে আরও অ্যাক্সেসযোগ্য করা এমন একটি জিনিস যা প্রায়শই উপেক্ষা করা হয় তবে এটি আপনার ওয়েবসাইটে আরও উত্পাদনশীল অভিজ্ঞতা তৈরি করতে সহায়তা করতে পারে। অনেকগুলি সাধারণ ব্যবহারকারী আছেন যা কীবোর্ডে হাত রাখার জন্য ওয়েবসাইটগুলি নেভিগেট করতে কীবোর্ড কমান্ড ব্যবহার করে।

Comments

সমস্যাটি ক্রোমে রয়েছে এটি কেবল ট্যাবিংয়ের পরিবর্তে ক্লিকের ক্ষেত্রেও ঘটে (বেশিরভাগ ব্রাউজারে লজিকাল বাস্তবায়ন পাওয়া যায়)। সুতরাং প্রকৃতপক্ষে গুগল অ্যাক্সেসযোগ্যতা হ্রাস করছে কারণ বেশিরভাগ দেবগণ কেবল এটিকে বন্ধ করে দেবে (ক্রোমে) গুগল / ক্রোম সম্পর্কিত সমস্যাগুলি অনুসন্ধান / ফিক্সিংয়ে আরও সময় নষ্ট হয় (পাসওয়ার্ড সংরক্ষণ, ইমেল সিএসএস সমর্থন, এটি)

— রানলুপ

তুমি ঠিক! রূপরেখা সরানোর সময় অ্যাকাউন্টে অ্যাক্সেসিবিলিটি নেওয়ার জন্য আপনার কিছুটা জাভাস্ক্রিপ্টের দরকার: প্যাসিওলোগ্রোপ.com

— blog

আপনি কোনও মন্তব্যে এমনভাবে স্টাইল / ফর্ম্যাট করতে পারবেন না যাতে আপনি উত্তর দিতে পারেন। একমাত্র মন্তব্যের মাধ্যমে বিশদ পর্যায়ে এই মতামত প্রদান করা শক্ত।

— এ-ডাব

@ রুনলুপ ক্লিকের পরে আপনি কীভাবে নীল সীমানা সরিয়ে বা পরিবর্তন করবেন? এটি কি সিএসএসের মাধ্যমে করা যায় বা জাভাস্ক্রিপ্টের প্রয়োজন?

— নিক

এই সমস্যাগুলি সহ লোকেরা কেবলমাত্র ভিমিয়াম-এফএফ ব্যবহার করতে পারে

— ইউকশিমা হুক্সে

Answer 3

আমি কেবল পৃষ্ঠাটি সমস্ত ট্যাগ থেকে সমস্তটি নির্বাচন করে এবং আউটলাইন প্রয়োগ করে আউটলাইনটি সরিয়েছি: সব কিছুই নয় :)

*:focus {outline:none}

ব্যাগোকোল যেমন উল্লেখ করেছে, আপনারও যোগ করার প্রয়োজন হতে পারে গুরুত্বপূর্ণ, সুতরাং শৈলীটি দেখতে এইরকম হবে:

*:focus {outline:none !important}

Comments

এই কোরো না প্লিজ। আপনার পৃষ্ঠাগুলি কীবোর্ডের সাহায্যে নেভিগেট করা ব্যবহারকারীরা বর্তমানে মনোনিবেশ করা উপাদানটি দেখতে পারবেন না। রূপরেখাটি আড়াল করার পরিবর্তে, ক্লিক ইভেন্টটি কোনও মাউস থেকে উত্পন্ন হলে উপাদানটি ঝাপসা করুন।

— joepio

এখানে আরও কিছু ফোকাস স্টাইলিং নিশ্চিত করার জন্য রয়েছে ...

— আরজিয়েল

Answer 4

আমার সমস্যার এই উদাহরণে আমাকে উল্লেখ করতে হয়েছিল box-shadow: none

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

Comments

আপনার পোস্টের জন্য ধন্যবাদ! "বাক্স-ছায়া" সম্পত্তিটি আমার ক্ষেত্রে মূল বিষয় ছিল।

— নাইটিং

এটা আমার জন্য একই সমস্যা ছিল। এটি প্রাসঙ্গিক নয় তবে আমি উবুন্টু 17.10 তে ক্রোমে রুটসের সেজ থিমটি ব্যবহার করছি।

— স্পেনসার হিল

কেবল box-shadow

— এটির

এটি যুক্ত করার জন্য আমাকে যুক্ত করতে হয়েছিল! সম্ভবত এটির জন্য কোথাও বুটস্ট্র্যাপের একটি নির্দিষ্ট সংজ্ঞা রয়েছে

— ওয়েবম্যান

এটি আমার সাথীর জন্য কাজ করেছে! সমাধান পোস্ট করার জন্য ধন্যবাদ। চিয়ার্স

— টিআইটিভিডিওগুলি 26'19

Answer 5

!importantআরও ভাল ফলাফলের জন্য ঘোষণাটি ভুলে যাবেন না

button:focus {outline:0 !important;}

সিএসএস ডকুমেন্টে সেই নিয়ম যেখানেই উপস্থিত থাকুক না কেন! গুরুত্বপূর্ণ সম্পত্তি থাকা একটি নিয়ম সর্বদা প্রয়োগ করা হবে।

Comments

"আরও ভাল ফলাফলের জন্য"? আপনি কি ব্যাখ্যা করতে পারেন! গুরুত্বপূর্ণ কি?

— পপনুডলস

তবে আপনি কি তা ব্যাখ্যা করতে পারেন? "যে কারণে এটি বিদ্যমান তার জন্য" যারা তাদের কারণ জানেন না তাদের কারণ ব্যাখ্যা করে না।

— পপনুডলস

গুরুত্বপূর্ণটি খুব কমই ব্যবহার করা উচিত এবং কেবল তা নিশ্চিত করার জন্য যে কোনও কিছু পরবর্তী নিয়মের দ্বারা ওভাররাইট করা উচিত নয়। পূর্ববর্তী বিধিগুলি ওভাররাইট করার সময় আপনার উপাদানগুলি সঠিক নির্বাচকের সাহায্যে লক্ষ্য করা উচিত।

— পপনুডলস

গুরুত্বপূর্ণ ব্যবহার খুব কমই ন্যায়সঙ্গত হয়। আপনার সিএসএস নির্বাচনকারীদের সর্বদা এমনভাবে স্কোপ করা উচিত যা আরও বেশি অর্থবোধ তৈরি করে এবং ব্যবহার না করে! কারণ এটি আপনাকে একটি "আরও ভাল ফলাফল" দেয় important

— রোনেন সাইপিস

দয়া করে এটি করবেন না। প্রযুক্তিগতভাবে এটি ওপি-র প্রশ্নের জবাব দেয়, ফোকাস পজিশনের প্রতিটি ইঙ্গিতকে সমালোচনা outline:0 !importantকরা খারাপ ইউএক্স এবং খারাপ দেব অনুশীলন। আপনি যদি এটি করছেন, দয়া করে নিশ্চিত হন যে আপনি ফোকাসের অবস্থানটি ইঙ্গিত করতে অন্য কিছু করছেন (যেমন উপাদানটির পটভূমির রঙ পরিবর্তন করা)।

— ক্লাউডওয়ার্কস

Answer 6

সরানো outlineঅ্যাক্সেসযোগ্যতার জন্য ভয়ানক! আদর্শভাবে, যখন ব্যবহারকারী কীবোর্ডটি ব্যবহার করতে চান তখনই ফোকাস রিংটি প্রদর্শিত হয় ।

ব্যবহার : ফোকাস-দৃশ্যমান । এটি বর্তমানে সিএসএস ব্যবহার করে কেবল কীবোর্ড-ফোকাস স্টাইল করার জন্য ডাব্লু 3 সি প্রস্তাব রয়েছে এবং এটি ফায়ারফক্সে সমর্থিত ( ক্যানিজ )। অন্যান্য বড় ব্রাউজারগুলি এটি সমর্থন না করা পর্যন্ত আপনি এই শক্তিশালী পলফিলটি ব্যবহার করতে পারেন ।

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

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

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

Comments

আপনি মনে করবেন না, আমি যতদূর জানি এটা হতে প্রয়োজন নেই outlineফোকাস রাষ্ট্র অন্য কোন উপায়ে, মত মাধ্যমে স্পষ্ট দৃশ্যমান তৈরি করা হয়: যেমন, দীর্ঘ হিসাবে হিসাবে border, background-color, box-shadowইত্যাদি

— মার্চ Örlygsson

সেরা উত্তর! আপনার পোস্টটি পঠনযোগ্য (এবং আমি এখন আপনার ব্লগের বাকী অংশগুলিও দেখছি 😅) ফোকাস-দৃশ্যমান এনপিএম প্যাকেজটি এটি এখনই যেখানে রয়েছে really

— ফেলডেভ

এটি অবশ্যই সেরা সমাধান। কোডের কয়েকটি লাইনের সাহায্যে আমি কীবোর্ডের ব্যবহারে রাখার সময় ক্লিকের সেই বিরক্তিকর নীল সীমান্ত থেকে মুক্তি পেয়েছি। ধন্যবাদ!

— পেস্তা

এই তথ্য সঠিক? এই নির্বাচকটি ফায়ারফক্স নয়, ক্রোমে সমর্থিত বলে মনে হচ্ছে। বিকাশকারী.মোজিলা.আর.ইন-

— সিএসএস/…

মনে হয় ফায়ারফক্সে নির্বাচককে ডাকা :-moz-focusringহলেও ডক্স যা বলে তার বিপরীতে এটি ক্লিক এবং ট্যাব ফোকাসের মধ্যে পার্থক্য করে না। ক্রোমে, এখন পর্যন্ত এটির কাজ করার জন্য আপনাকে নির্দিষ্ট পতাকাগুলি সক্ষম করতে হবে

— ফিলি 294

Answer 7

এটি আপনার সিএসএস ফাইলে যুক্ত করুন।

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

Comments

ধন্যবাদ. কাজ করেছেন তবে এমডিএন বলেছেন: এই বৈশিষ্ট্যটি মানহীন এবং মানক ট্র্যাকের নয়। এটি ওয়েবের মুখোমুখি উত্পাদন সাইটগুলিতে ব্যবহার করবেন না: এটি প্রতিটি ব্যবহারকারীর পক্ষে কাজ করবে না। বাস্তবায়ন এবং আচরণের মধ্যে ভবিষ্যতে পরিবর্তিত হতে পারে এর মধ্যে বৃহত অসুবিধাগুলিও থাকতে পারে।

— বেহনম মোহাম্মদী

Answer 8

এটি ব্যবহার করুন:

:active {
    outline:none;
}

বা এটি যদি এটি কাজ করে না:

:active {
   outline:none !important;
}

এটি আমার পক্ষে (এফএফ এবং ক্রোম, অন্তত) কাজ করে। :focusরাষ্ট্রকে টার্গেট করার পরিবর্তে , কেবলমাত্র রাষ্ট্রকে টার্গেট করুন :activeএবং এটি যখন কোনও ব্যবহারকারী কোনও লিঙ্কে ক্লিক করেন তখন আপনার ব্রাউজারে নান্দনিকভাবে অবিচ্ছিন্ন হাইলাইটিং সরিয়ে ফেলবে। অক্ষম ট্যাবস বা কোনও পৃষ্ঠার মাধ্যমে শিফট-ট্যাব সহ ব্যবহারকারী যখন তখন এটি ফোকাসের রাজ্যগুলি বজায় রাখে। উভয় পক্ষই খুশি। :)

Comments

আমার উত্তরটি কেন সম্পাদনা করবেন যদি আপনি কেবল আমার কোডযুক্ত সংস্করণটিকে একই কোড দিয়ে প্রতিস্থাপন করতে যাচ্ছেন তবে বাড়ানো হয়েছে? এটি এটি ব্যবহারকারীদের পক্ষে আরও ভাল করে স্পষ্ট করে না। আপনি কি সেই কিছুর জন্য উত্তর ক্রেডিট পান? LOL ...

— chuk

স্ট্যাকএক্সচেঞ্জ সাইটের বিন্দুতে এমন উত্তর থাকতে হবে যা যে কেউ তাদের পড়তে বুঝতে সহায়তা করে। এই উদ্দেশ্যে, সংক্ষিপ্ত, মিনিফায়েড কোড সহ একটি উত্তর পঠনযোগ্য-ফর্ম্যাট কোড হিসাবে সহায়ক নয়। উত্তরগুলি আরও পঠনযোগ্য করে তৈরি করা উন্নত করা প্রত্যেকের জন্য সাইটের উন্নতি করার একটি সাধারণ উপায়।

— ই

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

আপনি বুটস্ট্র্যাপ ৪.১ এবং সম্ভবত অন্যান্য সংস্করণ ব্যবহার করলে বেশিরভাগ সমাধান কাজ করবে না। অনেক মাথা ঠেকানোর পরে, আমি আবিষ্কার করেছি যে আপনাকে ছায়া-কিছুই নয় শ্রেণি প্রয়োগ করতে হবে :

<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

যতক্ষণ না সমস্ত আধুনিক ব্রাউজারগুলি সিএসএস-নির্বাচককে সমর্থন শুরু করবে : ফোকাস-দৃশ্যমান , অ্যাক্সেসিবিলিটি বাঁচানোর
সহজতম এবং সম্ভবত সর্বোত্তম উপায় হ'ল কেবলমাত্র মাউস ব্যবহারকারীদের জন্য এই কৌশল ফোকাসটিকে সরিয়ে ফেলা এবং এটি কীবোর্ড ব্যবহারকারীদের জন্য সংরক্ষণ করা for :

1. এই ক্ষুদ্র পলিফিলটি ব্যবহার করুন (প্রায় 10 কেবি): https://github.com/WICG/focus-visible 2. আপনার সিএসএসের
কোথাও পরবর্তী কোড যুক্ত করুন:

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

CSS4- নির্বাচকটির ব্রাউজার-সমর্থন: ফোকাস-দৃশ্যমান এখনই খুব দুর্বল:
https://caniuse.com/#search=focus-visible

Answer 19

সহজভাবে লিখুন outline:none;। সিউডো উপাদান ব্যবহার করার দরকার নেইfocus

Answer 20

এটি ক্রোম পরিবারে একটি সমস্যা এবং চিরতরে রয়েছে।

একটি বাগ উত্থাপিত হয়েছে https://bugs.chromium.org/p/chromium/issues/detail?id=904208

এটি এখানে দেখানো যেতে পারে: https://codepen.io/anon/pen/Jedvwj আপনি বাটনের মতো যে কোনও কিছুর একটি সীমানা যুক্ত করার সাথে সাথে (উদাহরণ হিসাবে ভূমিকা = "বাটন" কোনও ট্যাগে যুক্ত করা হয়েছে) ক্রোম মিস করে এবং আপনি যখন মাউস দিয়ে ক্লিক করেন তখন ফোকাসের স্থিতি সেট করে।

আমি এই ফিক্সটি ব্যবহার করার জন্য অত্যন্ত পরামর্শ দিচ্ছি: https://github.com/wicg/foc-- ভিজিবল ।

শুধু নিম্নলিখিত করা

npm install --save focus-visible

স্ক্রিপ্টটি আপনার এইচটিএমএলে যুক্ত করুন:

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

বা ওয়েবপ্যাক বা অন্য কিছু ব্যবহার করে যদি আপনার মূল প্রবেশ ফাইলটিতে আমদানি করুন:

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

তারপরে এটি আপনার সিএসএস ফাইলে রাখুন:

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