ক্লিকের বোতামগুলির চারপাশে কীভাবে ফোকাস সরানো যায়

225

আমি ক্লিক করার পরে আমার বোতামগুলির চারপাশে একটি হাইলাইট রয়েছে। এটি ক্রোমে রয়েছে।

অনির্বাচিত নির্বাচিত

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

আমি একটি থিম সহ বুটস্ট্র্যাপ ব্যবহার করছি, তবে আমি নিশ্চিত যে এটি নয়: আমি অন্য প্রকল্পে এটি আগে লক্ষ্য করছিলাম।

আমি যদি এর <a>পরিবর্তে কোনও ট্যাগ ব্যবহার করি তবে এটি চলে যায় <button>। কেন? আমি যদি ব্যবহার <button>করতে চাই তবে আমি কীভাবে এটিকে দূরে সরিয়ে দেব?

html  css  twitter-bootstrap 
— শান ক্লার্ক হেস
সূত্র
12
রূপরেখা: 0; আপনার আগ্রহী হতে পারে
— উইগলার Jtag
ক্লিক করার পরে কোনও ক্লাস যুক্ত হচ্ছে?
— কুজগুন
1
বাহ্যরেখা: 0 সাহায্য করবে না, না ওয়েবকিট-উপস্থিতি
— সান ক্লার্ক হেস
7
২৮ টি উত্তর এই সমস্যার জন্য কাজ করার জন্য বিভিন্ন পদ্ধতির পরামর্শ দেওয়ার জন্য আজকের প্রথম প্রান্তে ওয়েব বিকাশের দুঃখজনক অবস্থার প্রমাণ test
— ডেল্টানাইন
3
এই অ্যাক্সেসিবিলিটি বৈশিষ্ট্যটিকে একটি সমস্যা হিসাবে বিবেচনা করা লোকেরা হ'ল আজকের প্রথম প্রান্তের ওয়েব বিকাশের দুঃখজনক অবস্থার প্রমাণ।
— কোয়ান্টিন

উত্তর:

292

আমি অন্য পৃষ্ঠায় এই কিউ এবং এ পেয়েছি, এবং বোতাম ফোকাস শৈলী ওভাররাইডিং আমার জন্য কাজ করেছে। এই সমস্যাটি ক্রোমের সাথে ম্যাকোসের সাথে নির্দিষ্ট হতে পারে।

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

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

— jerimiah797
সূত্র
33
আমি এটিও ভেবেছিলাম, তবে রূপরেখা সরিয়ে ফেলাতে অ্যাক্সেসযোগ্যতার সমস্যা নেই?
— সিলভনন
10
আমার ধারণা, আমাদের আর কোন উপায় নেই। এছাড়াও আপনি যোগ করতে পারেন .btn:active:focusখুব সক্রিয় অবস্থা থেকে সরাতে নির্বাচক।
— সিলভনন
45
অ্যাক্সেসযোগ্যতার জন্য কোনও বোতাম থেকে রূপরেখা সরিয়ে ফেলা অবশ্যই খারাপ। এমন কিছু ব্যবহারকারী আছেন যারা মাউস নিয়ন্ত্রণ করতে পারবেন না এবং কীবোর্ডের সাহায্যে একটি পৃষ্ঠার মাধ্যমে ট্যাব সক্ষম করতে হবে। রূপরেখা সরিয়ে ফেলা খুব কঠিন করে তোলে। ক্লিকের উপর ফোকাস পেতে বাটনটি রোধ করা ভাল।
— মারফি র্যান্ডেল
ভবিষ্যতের ভ্রমণকারীদের জন্য, এই কোডটি ডিফল্ট বোতামের জন্য সমস্ত বোতামের সমস্ত স্টাইলকে সম্পূর্ণরূপে প্রতিস্থাপন করে (সমস্ত বোতাম নয়):.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; }
— জর্ডি
1
বুটস্ট্র্যাপ ভেরিয়েবল ব্যবহার করে যদি কেউ এই দুটি ভার সেট করে এটি অর্জন করতে পারে: t বিটিএন-ফোকাস-প্রস্থ: 0; $ btn-ফোকাস-বক্স ছায়া: কেউ না;
— বুলেট্রেইন
109

আপনি যেমন কিছু চান:

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

.Blur () পদ্ধতিটি হাইলাইট করা ফোকাসটিকে সঠিকভাবে সরিয়ে দেয় এবং বুটস্ট্র্যাপগুলির স্টাইলগুলিকে গণ্ডগোল করে না।

— cshotton
সূত্র
9
এটি একটি সংক্ষিপ্ত মুহুর্তের জন্য রূপরেখা প্রদর্শন করে, যা এখনও এটি ধ্বংস করে দেয়: /
— সিলভেনন
2
আমি ক্লিক ইভেন্টের পরিবর্তে ফোকাস ইভেন্ট বন্ধ করে দিলে আমি কোনও ঝাঁকুনি দেখছি না।
— চার্লস
2
এটি দুর্দান্ত কাজ করেছে! যদি আমি একই বাটনে একটি আলাদা ক্লিক () ইভেন্ট হ্যান্ডলার (যেমন আপনি যখন বোতামটি ক্লিক করেন তখন কার্যকর করা কোড) সংযুক্ত করার চেষ্টা করতাম তবে কী সম্ভাব্য সমস্যা হবে?
— নীল_
4
যদি কেউ এখানে ভাবছেন যে এটি বুটস্ট্র্যাপ ভি 4 এ কাজ করে তবে তা তা করে। উত্তর এখনও 2018 সালে বৈধ, চিয়ার্স!
— ই
4
শীর্ষ-ভোট প্রাপ্ত প্রশ্নের তুলনায় এটি কী অ্যাক্সেসযোগ্যতা-ঠিক আছে?
— চার্লসএম
47

আমার বোঝার যে ফোকাস প্রথম নিম্নলিখিত প্রয়োগ করা হয় onMouseDown, ঘটনা তাই কলিং e.preventDefault()মধ্যে onMouseDownএকটি পরিষ্কার আপনার চাহিদার উপর নির্ভর সমাধান করা যেতে পারে। এটি অবশ্যই একটি অ্যাক্সেসিবিলিটি বন্ধুত্বপূর্ণ সমাধান, তবে স্পষ্টতই এটি মাউস ক্লিকগুলির আচরণটি সামঞ্জস্য করে যা আপনার ওয়েব প্রকল্পের সাথে সামঞ্জস্য নাও করতে পারে।

আমি বর্তমানে এই সমাধানটি ব্যবহার করছি (একটি react-bootstrapপ্রকল্পের মধ্যে) এবং আমি ক্লিকের পরে বোতামগুলির ফোকাস ফ্লিকার বা বজায় রাখা ফোকাসটি পাই না তবে আমি এখনও আমার ফোকাসটি ট্যাব করতে সক্ষম এবং একই বোতামগুলির ফোকাসটি দৃশ্যত রূপ দিতে সক্ষম।

— pjs
সূত্র
2
হ্যাঁ. আপনার সমাধান কাজ করে। বখশিশের জন্য ধন্যবাদ. সমাধানের জন্য এখানে ফিডল । তবে এটিতে প্রতিটি বোতামের সাথে একটি জাভাস্ক্রিপ্ট হ্যান্ডলার সংযুক্ত থাকতে হবে। এটি কেবলমাত্র সিএসএসের সমাধানের মাধ্যমে আমরা অর্জন করতে পারলে দুর্দান্ত হবে।
— গিলীল ভাষা
1
আমি মনে করি লোকেরা যখন কোনও উপাদানটিতে ক্লিক করে তখন ফোকাসের দিকে মনোনিবেশ করার প্রত্যাশা করে এবং এই সমাধানটি এটি প্রতিরোধ করে। আমি প্রায়শই একটি উপাদানটিতে ক্লিক করি এবং তারপরে ফোকাস দেওয়ার জন্য মাউস ছেড়ে দেওয়ার আগে সরে যাই যাতে আমি সেখান থেকে ট্যাব করতে পারি।
— মাইকেল টন্টচেভ
7
স্নিপেটের জন্য যে কেউ ব্রাউজ করছেন তাদের পক্ষে এটি ক্লিক করা উচিত এবং ক্লিক করুন সংরক্ষণ করুন:onMouseDown={e => e.preventDefault()}
— অ্যাডাম কে ডিন
1
এটি স্পেস বার এবং রিটার্ন কীটি বোতামটি "ক্লিক" করতে বাধা দেয়। সম্ভবত আরো একটি সম্পূর্ণ সমাধান সঙ্গে এই পুনরায় জুড়তে হল: onKeyUp={(e) => {if (e.keyCode === 13 || e.keyCode === 32) handleClick()}।
— jfbloom22
আপনি onKeyUpইভেন্টের ভিতরে e.preventDefault () কল করবেন না । এটি যদি আপনি এটি করেন তবে দেখা যাচ্ছে যে স্পেস কী বা রিটার্ন কীটি এবং ট্যাবিং বা যেকোন জায়গায় ক্লিক করার পরে বোতামটি ফোকাস থেকে যায়।
— jfbloom22
30

বিশ্বাস করা যায় না কেউ এখনও এটি পোস্ট করেনি।

বোতামের পরিবর্তে একটি লেবেল ব্যবহার করুন।

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

বেহালা

— অ্যাডাম ম্যাককেনা
সূত্র
11
এটি বেশিরভাগ ব্যবহারকারীর পক্ষে সূক্ষ্ম কাজ করে তবে এই পদ্ধতিটি স্ক্রিন পাঠকদের বা কীবোর্ডগুলির পক্ষে উপযুক্ত নয় এবং অন্ধ ব্যবহারকারীদের এবং আপসযুক্ত মোটর দক্ষতার সাথে ব্যবহারকারীদের বোতামটির সাথে যোগাযোগ করতে অক্ষম হবে।
— মারফি র্যান্ডেল
8
1. <a> ট্যাগ দিয়ে লেবেল প্রতিস্থাপন করুন। যাতে এটি কীবোর্ডের মাধ্যমে অ্যাক্সেসযোগ্য। ২. পর্দা পাঠক ব্যবহারকারীর অ্যাক্সেসযোগ্যতার উন্নতি করতে আরিয়া-ভূমিকা = "বোতাম" যুক্ত করুন। আপডেট হয়েছে ফিডল
— গিলি ভাষা
চমৎকার সমাধান, আমাকে সাহায্য করেছে, তবে কোনওভাবে কোনও কৌণিক নির্দেশের জন্য এমনকি কোনও মোড়ক দিয়েও কাজ করে না, যেমন<a class="btn"><my-directive/></a>
— ya_dimon
2
চারপাশে ট্যাবিংয়ের সময় লেবেলগুলি সম্পূর্ণ নন মাউস ব্যবহারকারীদের জন্য এড়িয়ে যায়, অ্যাক্সেসযোগ্যতার জন্য খারাপ
— ফিলিপ জুন
1
বুটস্ট্র্যাপ 4 এ এটি বোতামটির চেহারা পরিবর্তন করতে পারে।
— জেসন কিম
30

যদিও সমস্ত ফোকাসযুক্ত বোতামগুলির জন্য কেবল ব্যবহারকারী রূপরেখা সরিয়ে ফেলা সহজ (যেমন191933897 এর উত্তরে ) তবে সমাধানটি অ্যাক্সেসযোগ্যতার দৃষ্টিকোণ থেকে খারাপ (উদাহরণস্বরূপ, ব্রাউজারের ডিফল্ট ফোকাস রূপরেখার সাথে মেসিং বন্ধ করুন দেখুন )

অন্যদিকে, সম্ভবত আপনার ব্রাউজারটিকে আপনার ক্লিক করা বোতামটি স্টাইলিং বন্ধ করতে বোঝানো অসম্ভব বলে মনে করা যদি এটি মনে করে যে আপনি এটি ক্লিক করার পরে এটি ফোকাস করেছে (আমি আপনাকে দেখছি, ওএস এক্সে ক্রোম))

তাহলে আমরা কি করতে পারি? দু'টি বিকল্প আমার মনে আসে।

1) জাভাস্ক্রিপ্ট (jQuery): $('.btn').mouseup(function() { this.blur() })

আপনি আপনার ব্রাউজারটিকে বোতামটি ক্লিক করার সাথে সাথে যেকোনও বোতামের চারদিকে ফোকাস সরিয়ে দেওয়ার নির্দেশ দিচ্ছেন । mouseupপরিবর্তে ব্যবহার করে clickআমরা কীবোর্ড-ভিত্তিক ইন্টারঅ্যাকশনগুলির জন্য ডিফল্ট আচরণ রাখছি ( mouseupকীবোর্ড দ্বারা ট্রিগার হয় না)।

2) সিএসএস: .btn:hover { outline: 0 !important }

এখানে আপনি কেবল আটকে থাকা বোতামগুলির জন্য রূপরেখা বন্ধ করেছেন । স্পষ্টতই এটি আদর্শ নয়, তবে কিছু পরিস্থিতিতে যথেষ্ট হতে পারে।

— অ্যালেক্সিস
সূত্র
4
1 নম্বরটি একটি দরকারী টিপ। বোতামটি টিপানো না হলে এটি ফোকাসটি অক্ষম করবে, তবে এটি টিপানোর সময় এটি প্রদর্শিত হবে। আমি ক্লিক সক্রিয় উপাদান সঙ্গে ফোকাস অক্ষম করেছি :active:focus {outline:none;}।
— অবশ্যই
ইভেন্ট শ্রোতাদের বাঁধাই করা শর্টহ্যান্ড ফাংশনগুলি jQuery এ অবচয় করা হয়েছে, তাই আপনি যদি এর .on('mouseup', function() { ... })পরিবর্তে ব্যবহার করেন তবে ভাল হয়.mouseup()
— ক্রেজি রেড
16

এটি আমার পক্ষে কাজ করেছে। আমি একটি কাস্টম ক্লাস তৈরি করেছি যা প্রয়োজনীয় সিএসএসকে ওভাররাইড করে।

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

এখানে চিত্র বর্ণনা লিখুন

ওয়েবেকিট-বাক্স-শ্যাডো ক্রোম এবং সাফারি ব্রাউজারগুলির জন্য কাজ করবে।

— men_aka
সূত্র
আমার জন্য কাজ করে তবে border: none !important;একই মাত্রা বজায় রাখতে আমাকে বোতামটি সরিয়ে ফেলতে হয়েছিল
— এমেকা মাবাঃ
1
আমি উপরের উত্তর ফোকাস অপসারণ করতে চেয়েছি উত্তরগুলি কাজ করে না তবে "বাক্স-ছায়া: কিছুই নয়! গুরুত্বপূর্ণ;" এটি আমার জন্য ধন্যবাদ @ মেনাকা
— উষ্ণ
11

এটি আমার পক্ষে কাজ করে, অন্য একটি সমাধান উল্লেখ করা হয়নি। এটি ক্লিক ইভেন্টে ফেলে দিন ...

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

বা অন্য ইভেন্ট / পদ্ধতি থেকে কল করুন ...

$(".btn_name").trigger("blur");
— হরণ করা
সূত্র
এটির সাথে সমস্যাটি হ'ল যখন কোনও কীবোর্ড ব্যবহারকারী বাটনটি "ক্লিক" করে (এটিকে কেন্দ্র করে স্পেস টিপে) তখন এটি ফোকাস হারায়। তারপরে আপনাকে যেখানেই ছিলেন সেখানে ফিরে যেতে হবে tab 😡
— তমলিন
8

আপনি যদি :focus { outline: none; }রূপরেখা সরানোর জন্য নিয়মটি ব্যবহার করেন তবে লিঙ্ক বা নিয়ন্ত্রণ ফোকাসযোগ্য হবে তবে কীবোর্ড ব্যবহারকারীদের জন্য কোনও ফোকাসের ইঙ্গিত ছাড়াই। এটিকে জেএস-এর মতো অপসারণের পদ্ধতিগুলি onfocus="blur()"আরও খারাপ এবং কীবোর্ড ব্যবহারকারীরা নিয়ন্ত্রণের সাথে ইন্টারঅ্যাক্ট করতে অক্ষম হবে।

আপনি যে হ্যাকগুলি ব্যবহার করতে পারেন তা হ'ল ধরণের ধরণের , :focus { outline: none; }ব্যবহারকারীরা মাউসের সাথে ইন্টারঅ্যাক্ট করার সময় নিয়মাবলী যুক্ত করার এবং কীবোর্ডের ইন্টারঅ্যাকশন সনাক্ত করা হলে সেগুলি আবার মুছে ফেলার অন্তর্ভুক্ত। লিন্ডসে ইভান্স এর জন্য একটি শুল্ক প্রকাশ করেছে: https://github.com/lindsayevans/outline.js

তবে আমি এইচটিএমএল বা বডি ট্যাগে ক্লাস স্থাপন করতে পছন্দ করব। এটি কখন ব্যবহার করতে হবে তার সিএসএস ফাইলে নিয়ন্ত্রণ রাখতে হবে।

উদাহরণস্বরূপ (ইনলাইন ইভেন্ট হ্যান্ডলারগুলি কেবল প্রদর্শনের উদ্দেশ্যে)

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

আমি টগিটারে একটি পেন রেখেছি: http://codepen.io/snobojohan/pen/RWXXmp

পারফরম্যান্সের সমস্যাগুলি রয়েছে তবে সাবধান হন। ব্যবহারকারীরা যখনই মাউস এবং কীবোর্ডের মধ্যে স্যুইচ করে ততবারই এটি রঙ করে ain আরো অহেতুক রঙে এড়ানো সম্পর্কে http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

— snobojohan
সূত্র
6

আমি এটি লক্ষ্য করেছি এবং যদিও তা সত্যিই আমাকে বিরক্ত করে, আমি বিশ্বাস করি এটি হ্যান্ডেল করার কোনও সঠিক উপায় নেই।

আমি প্রদত্ত অন্য সমস্ত সমাধানগুলির বিরুদ্ধে সুপারিশ করব কারণ তারা বোতামের অ্যাক্সেসযোগ্যতাটিকে পুরোপুরি মেরে ফেলেছে, সুতরাং এখন আপনি যখন বোতামটি ট্যাব করবেন আপনি প্রত্যাশিত মনোযোগ পাবেন না।

এড়ানো উচিত!

.btn:focus {
  outline: none;
}
— অস্কার বোলাওস
সূত্র
আমি এটি ভুল বলে মনে করি না, কারণ ফোকাস করার সময় আপনার কাছে এখনও বোতামটিতে কিছুটা আলাদা বাজ রয়েছে, তাই কীবোর্ড ব্যবহারকারীরা এখনও এটি সনাক্ত করতে পারেন। তবে এই ধারণাটি হয়েছিল, কারণ আপনি বাম মাউস বোতাম টিপুন এবং ধরে রাখলে আপনি এখনও সীমানা ফ্রেম পাবেন
— apocalypz
6

আমি একটি সমাধান খুঁজে। যখন আমরা ফোকাস করি, বুটস্ট্র্যাপ বাক্স-ছায়া ব্যবহার করে, তাই আমরা কেবল এটি অক্ষম করি (যথেষ্ট খ্যাতি নয়, চিত্র আপলোড করতে পারে না :()।

আমি যোগ 

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

এটা কাজ করে।

— টফি
সূত্র
6

বিকল্প 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 (alচ্ছিক): যেখানে প্রয়োজন সেখানে 'ফোকাস-দৃশ্যমান' শ্রেণি ব্যবহার করুন

আপনার যদি এমন কোনও আইটেম থাকে যেখানে আপনি যখন কেউ ক্লিক করেন বা স্পর্শ ব্যবহার করেন তখন ফোকাস রিংটি প্রদর্শন করতে চান তবে কেবল focus-visibleক্লাসটি ডিওএম উপাদানটিতে যুক্ত করুন।

<!-- 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>

সম্পদ:

ডেমো:

— JamesWilson
সূত্র
তবে এমনকি যদি ক্রোম এখনও এটি সমর্থন না করে তবে এটি সম্ভবত সেরা সমাধান নয় (আপাতত)
— এলিয়াহ মক
এর পরিবর্তে আপনি কী পরামর্শ দিচ্ছেন?
— জেমস উইলসন
অন্যান্য উত্তরগুলির মতো রূপরেখাটি লুকান যতক্ষণ না এই সমাধানটি আরও মানিক হয়
— এলিয়াহ মক
আমার পড়া জিনিসগুলি থেকে, যদি অ্যাক্সেসযোগ্যতা কোনও উদ্বেগ হয় তবে এর সাথে রূপরেখা কার্টের ব্লাঞ্চে লুকিয়ে রাখা <whatever>:focus { outline: none }এই সমাধানের চেয়ে খারাপ ধারণা। অ্যাক্সেসিবিলিটি সম্প্রদায়ের আসলে এমন লোকেরা আছেন যাঁরা আপনাকে বরং রূপরেখাটি সরাবেন না এবং তার পরিবর্তে সবকিছুকে একটি করে তুলবেন: ফোকাস স্টাইল (রূপরেখা বা বাক্স-ছায়া), এবং সমর্থন করতে চান না: ব্রাউজারগুলি কোনও উপায় প্রয়োগ না করা পর্যন্ত ফোকাস-দৃশ্যমান সমস্ত আইটেমের ফোকাসযোগ্য হওয়া উচিত কিনা সে বিষয়ে ব্যবহারকারীরা একটি ব্যবহারকারী পছন্দ নির্দিষ্ট করে। আমি ভাবতে চাই: ফোকাস-দৃশ্যমান নকশা উদ্বেগ এবং a11y এর মধ্যে একটি সুখী মাধ্যম।
— জেমস উইলসন
5

যদি উপরেরগুলি আপনার পক্ষে কাজ করে না, তবে এটি ব্যবহার করে দেখুন:

.btn: ফোকাস {রূপরেখা: কিছুই নয়; বাক্স-ছায়া: কিছুই নয়; সীমানা: 2px কঠিন স্বচ্ছ;

ব্যবহারকারী 1933897 হিসাবে উল্লেখ করা হয়েছে, এটি ক্রোমের সাথে ম্যাকোসের সাথে নির্দিষ্ট হতে পারে।

— alns
সূত্র
এখনও bootstrap 4.0উইন্ডোজ
— 3gwebtrain
5

দেরীতে, তবে কে জানে কারও সাহায্য করতে পারে। সিএসএস দেখতে হবে:

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

এইচটিএমএল দেখতে হবে:

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

আপনি বিটিএন রাখতে পারেন এবং এর সাথে সম্পর্কিত আচরণগুলি।

— স্টেফানি উইচে
সূত্র
1
element:focus { box-shadow: none; }নীল রূপরেখা / ছায়া মুছে ফেলা হয়েছে।
— ব্যবহারকারী435421
3

আমি উপরের মন্তব্যে এটি উল্লেখ করেছি, তবে স্বচ্ছতার জন্য পৃথক উত্তর হিসাবে তালিকাভুক্ত করা এটি মূল্যবান। যতক্ষণ না আপনার আসলে বোতামটিতে ফোকাস করার দরকার নেই, আপনি কোনও সিএসএস প্রভাব প্রয়োগ করার আগে ফোকাস ইভেন্টটি এটিকে সরাতে ব্যবহার করতে পারেন:

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

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

— চার্লস
সূত্র
এটি আমার জন্য অর্ধেক কৌশলটি করেছিল। আমি প্রতিক্রিয়া এবং প্রতিক্রিয়া-বুটস্ট্র্যাপ ব্যবহার করছি। ক্লিক করার পরে, বোতামটি এটিকে ঘিরে একটি আলোকপাত করছিল। E.target.blur () যুক্ত করা; আভা মুছে ফেলা হয়, কিন্তু বোতামটি একটি আলাদা রঙ থেকে যায়।
— পিক্সেলউইজ
3

শৈলী

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

ব্যবহার

<button class="btn btn-primary not-focusable">My Button</button>
— বোগদান কান্তেরুক
সূত্র
এই উত্তরটি অন্য উত্তরগুলির চেয়ে আলাদা কীভাবে?
— এপল
2
কেবলমাত্র একটি পার্থক্য আছে - সমস্ত বোতাম, লিঙ্ক ইত্যাদির উপর ভিত্তি করে আচরণগুলি ছাড়াই আপনার প্রয়োজনীয় উপাদানগুলির "মনোনিবেশযোগ্য" নির্দিষ্টকরণগুলির জন্য ফোকাস সরিয়ে ফেলতে পারেন
— বগদান ক্যান্তেরুক
3

বোতামের চারপাশে সীমানা সরানোর জন্য এই সমাধানটি ব্যবহার করে দেখুন। CSS এ এই কোড যুক্ত করুন।

চেষ্টা 

button:focus{
outline:0px;
}

যদি কাজ না করে তবে নীচে ব্যবহার করুন।

button:focus{
 outline:none !important;
 }
— রানা আলমগীর
সূত্র
দ্বিতীয়টি এমনকি প্রতিক্রিয়াযুক্ত উপাদান ইউআই বোতামটি নিয়েও কাজ করে
— গীক গাই
3

খাঁটি সিএসএসের উপায় চাইবার জন্য লোকেরা:

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

এটি লিঙ্ক ইত্যাদির জন্যও কাজ করতে পারে এবং বোনাস, এটি কীবোর্ডের অ্যাক্সেসিবিলিটিগুলি রাখে। শেষ পর্যন্ত এটি সমর্থন করে না এমন ব্রাউজারগুলি দ্বারা উপেক্ষা করা হয়: ফোকাস-দৃশ্যমান

— মার্টিন পেদ্রোস
সূত্র
4
এটি কেবলমাত্র Chrome- এ পরীক্ষামূলক বৈশিষ্ট্যগুলি সক্রিয় অনুযায়ী কাজ করবেন developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
— জাস্টিন কান
focus-visibleএখন একটি সরকারী পলফিল আছে। এই উত্তরটিতে আমার উত্তর স্ট্যাকওভারফ্লো . com / a / 60219624 / 413538 কীভাবে আসলে এই সমস্ত বোঝার জন্য তা বিস্তারিতভাবে বর্ণনা করা হয়েছে।
— জেমস উইলসন
2

আমরা একই ধরণের সমস্যায় ভুগছিলাম এবং লক্ষ্য করেছি যে বুটস্ট্র্যাপ 3 টি তাদের ট্যাবগুলিতে (ক্রোমে) সমস্যা নেই। দেখে মনে হচ্ছে যে তারা বাহ্যরেখা-শৈলী ব্যবহার করছে যা ব্রাউজারটিকে সর্বোত্তম কী করা উচিত তা সিদ্ধান্ত নিতে দেয় এবং Chrome আপনি যা চান তা করতে চায়: আপনি যখন উপাদানটি সন্ধান না করেন তখনই ফোকাস করার সময় আউটলাইনটি দেখান।

outline-styleব্রাউজারটি এর অর্থ কী তা স্থির করতে পারে তাই এর জন্য সমর্থন পিন করা শক্ত। কয়েকটি ব্রাউজারে যাচাই করা ভাল এবং ফ্যাল-ব্যাক নিয়ম রয়েছে।

— TeknoFiend
সূত্র
2

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

জাতীয়:

$('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/

— সেব উলফোর্ড
সূত্র
ক্লিকের পরিবর্তে মাউসডাউন ব্যবহার করুন। প্রাথমিক অবস্থায় মাউস টিপলে (এটিকে ছাড়াই) চাপ দেওয়া অবস্থায় ক্লিকের আউটলাইনটি উপস্থিত হয়।
— ভিনসেন্ট হচ-ড্রেই
2 
.btn:focus:active {
  outline: none;
}

এটি ক্লিকের আউটলাইনটি সরিয়ে দেয়, তবে ট্যাবিংয়ের সময় ফোকাসটি রাখে (a11y এর জন্য)

— yennefer
সূত্র
এটি কেবল মাউসের ডাউনলাইনটি সরিয়ে দেয়। মাউস আপ করার পরে, রূপরেখাটি উপস্থিত হবে।
— ওয়েলস্প্রিং
2

এটি সবচেয়ে ভাল কাজ করে

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

এই রূপরেখা: বোতাম এবং ট্যাগ উভয়ের জন্য কোনও কাজ করবে না

— মিলন পানিগগ্রাহী
সূত্র
কিভাবে এই প্রশ্নের উত্তর দেয়? দয়া করে কিছু ব্যাখ্যা যোগ করুন।
— আন্দ্রে কুল
0

"ট্রানজিশন" ইভেন্টটি ট্রিগার করতে বোতামটি ব্যবহার করার সময় আমার কেবল ম্যাকস এবং ক্রোমে একই সমস্যা হয়েছিল। যদি কেউ এটি পড়েন তবে ইতিমধ্যে কোনও ইভেন্ট শ্রোতা ব্যবহার করছেন, আপনি .blur()নিজের ক্রিয়াকলাপের পরে ফোন করে এটি সমাধান করতে পারেন ।

উদাহরণ:

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

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

— jospablos
সূত্র
0

আপনি সেট করতে পারেন tabIndex="-1"। আপনি যখন নজর কাড়া নিয়ন্ত্রণের মাধ্যমে TAB এ পারেন তখন এই বোতামটি এড়িয়ে যেতে ব্রাউজারটি তৈরি করবে।

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

অন্যদিকে, ট্যাবটিকে নন-ট্যাবলেটযোগ্য তৈরিতে অ্যাক্সেসযোগ্যতার প্রভাব রয়েছে।

আমি এটিকে এক্স বোতাম থেকে ফোকাসের রূপরেখা সরাতে ব্যবহার করছি bootstrap modal, যার নীচে যে কোনও উপায়ে সদৃশ "ক্লোজ" বোতাম রয়েছে তাই আমার সমাধান অ্যাক্সেসযোগ্যতার উপর কোনও প্রভাব ফেলবে না।

— zmechanic
সূত্র
0

যদি আপনি কোনও ওয়েবকিট ব্রাউজার ব্যবহার করেন (এবং সম্ভাব্যভাবে একটি ব্রাউজার যা ওয়েবকিট বিক্রেতা উপসর্গের সাথে সামঞ্জস্য করে) তবে সেই রূপরেখাটি বোতামের -webkit-focus-ringসিউডোক্লাসের অন্তর্গত। কেবলমাত্র সেট এটা outlineকরতে none:

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

(যদিও কিছু ক্রোম শৈলী শুধুমাত্র একটি MacOS জিনিস, ক্রোম যেমন একটি WebKit ব্রাউজার, এবং এই প্রভাব লিনাক্স খুব ঘটে হয় MacOS শুধুমাত্র)

— নেট সিমার
সূত্র
0

<a>বোতাম হিসাবে অভিনয় করে আমার একই সমস্যা হয়েছে এবং আমি আবিষ্কার করেছি যে আমি অ্যাটর যুক্ত করে একটি কাজের অনুপস্থিত ছিলtype="button" এটি আমার পক্ষে কমপক্ষে স্বাভাবিকভাবে আচরণ করে।

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

— spcsLrg
সূত্র
typeঅ্যাট্রিবিউট এই কোনো প্রভাব থাকা উচিত, এবং buttonতার জন্য একটি অবৈধ মান। অ্যাট্রিবিউটে একটি MIME প্রকার গ্রহণ এবং ক্লায়েন্ট তথ্য সাজানোর কি এটা যদি এটা লিংক অনুসরণ করে পেতে (যেমন আশা করা উচিত বলে <a type="application/pdf" ...>।
— কোয়েন্টিন
ধন্যবাদ কুইন্টিন হ্যাঁ আমি এটি সম্পর্কে সচেতন। আমি শুরু করেছিলাম role="button"তবে এটি কার্যকর হয়নি ( <button>পরিবর্তে এর পরিবর্তে ব্যবহারের পরে <a>)। আমার বাস্তবায়ন বিশেষত একটি দাবি করেছে <a>এবং না <button>। তাই অনেকটা ঝাঁকুনির পরে, আমি এই কার্যকরীটি আবিষ্কার করেছি (সম্ভবত একটি বিএস বাগ)!
— spcsLrg
0

সরাসরি এইচটিএমএল ট্যাগে (এমন দৃশ্যে যেখানে আপনি নিজের ডিজাইনের অন্য কোনও জায়গায় বুটস্ট্র্যাপ থিম রেখে যেতে চাইতে পারেন) ..

উদাহরণ চেষ্টা করুন ..

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

..ect ,. পছন্দসই প্রভাব উপর নির্ভর করে।

— কেউ না
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.