কীভাবে ফায়ারফক্সের ডটেড আউটলাইনটি বোতামগুলিতে পাশাপাশি লিঙ্কগুলিতে সরিয়ে ফেলা যায়?

Question

আমি এর সাথে লিঙ্কগুলিতে ফায়ারফক্সকে কুৎসিত বিন্দুযুক্ত ফোকাসের রূপরেখা প্রদর্শন করতে না পারি :

a:focus { 
    outline: none; 
}

তবে আমি কীভাবে <button>ট্যাগগুলির জন্য এটি করতে পারি ? আমি যখন এটি করি:

button:focus { 
    outline: none; 
}

আমি যখন তাদের ক্লিক করি তখন বোতামগুলির মধ্যে বিন্দুযুক্ত ফোকাসের রূপরেখা থাকে।

(এবং হ্যাঁ, আমি জানি এটি একটি ব্যবহারযোগ্যতার সমস্যা, তবে আমি আমার নিজের ফোকাসের ইঙ্গিতগুলি দিতে চাই যা কুৎসিত ধূসর বিন্দুর পরিবর্তে ডিজাইনের জন্য উপযুক্ত)

Comments

ফায়ারফক্স ৪-এর মতো মনে হচ্ছে, ক্লিক করার সময় উপাদানগুলি ডিফল্টরূপে আর একটি রূপরেখা পাবে না, তবে কেবলমাত্র কীবোর্ড ফোকাস পাওয়ার সময়।

— গিরত

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

— মার্কাস গ্রাফ

Answer 1

button::-moz-focus-inner {
  border: 0;
}

Comments

হ্যাঁ এটি আমার পক্ষেও কাজ করে! এখন এটি কীভাবে নির্বাচনের জন্য করা যেতে পারে?

— 7wp

নোট করুন যে এটি ইনপুট (যেমন ইনপুট :: - মোজ-ফোকাস-অভ্যন্তরীণ {সীমানা: 0;}) এর জন্যও কাজ করে

— এল ইয়াবো

ডাবল কোলনের উদ্দেশ্য: (CSS3 স্বরলিপি) evotech.net/blog/2007/05/…

— শোলসিংগার

এটি আমার পক্ষে কাজ করে নি, কারণ বুটস্ট্র্যাপ.সিএস এই কুৎসিত বিন্দুযুক্ত বোতামগুলি তৈরি করছিল। পরিবর্তে আমি রেখেছি:focus {outline:none !important;}

— মেশিনডিক্ট্ট

: ফোকাস {রূপরেখা: কিছুই নয়;} :: - মোজ-ফোকাস-অভ্যন্তর {সীমানা: 0; less কম নির্দিষ্ট হবে

— বেন

Answer 2

কোনও নির্বাচককে সংজ্ঞায়িত করার দরকার নেই।

:focus {outline:none;}
::-moz-focus-inner {border:0;}

তবে এটি ডাব্লু 3 সি থেকে অ্যাক্সেসযোগ্যতার সেরা অনুশীলনগুলিকে লঙ্ঘন করে। কীবোর্ডের সাহায্যে চলাচলকারীদের সহায়তা করার জন্য রূপরেখা রয়েছে।

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Comments

ধন্যবাদ, সঠিক উত্তর না দিলে এটি আমার পক্ষে কাজ করেছিল। আমি অবশ্যই ভুল নির্বাচক ব্যবহার করা হয়েছে।

— irl_irl

এর জন্য ধন্যবাদ, এটি কি লিঙ্ক এবং বোতামগুলিতেও এটি সরিয়ে দেবে?

— নাথান

এই এক সেরা! গৃহীত উত্তর শুধুমাত্র জন্য <button>, না <a>না<input>

— রন ভ্যান Heijden ডের

উবুন্টু (জিএনইউ / লিনাক্স) এর অধীনে মোজিলা ফায়ারফক্স 30 এ পারফেক্ট।

— ই তথ্য 128

আমি এই ব্রেকিং অ্যাক্সেসযোগ্যতা সম্পর্কে নোট দ্বিতীয় করব। এটি মনে রাখা গুরুত্বপূর্ণ যে প্রত্যেকে মাউস ব্যবহার করতে পারে না, বা দেখতে বা ভাল দেখতে পারে না। এতে বলা হয়েছে, লিঙ্কটি (এবং সাধারণ জ্ঞান) অনুযায়ী আউটলাইনটি গোপন করা কেবল তখনই 1111 এর বিরতি ঘটে without ... an author-supplied visual focus indicator- অন্য কথায়, ওপির উল্লেখ অনুসারে, ব্যবহারকারী-এজেন্ট শৈলীটি আপনার নিজের সাথে প্রতিস্থাপন করা ভাল। আদর্শভাবে এটি উচ্চ-বিপরীতে হওয়া উচিত।

— জনসিপ

Answer 3

যদি আপনি ডটেড আউটলাইন থেকে মুক্তি পেতে সিএসএস ব্যবহার করতে পছন্দ করেন:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Comments

শূন্যের সংখ্যাগুলিতে আপনার কোনও ইউনিট লাগবে না। 0pxমাত্র 0

— স্ল্যাং

Answer 4

নীচে লিঙ্কস এর ক্ষেত্রে আমার পক্ষে কাজ করেছে, ভাগ করে নেওয়ার কথা চিন্তা করেছে - যদি কেউ আগ্রহী হয়।

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

চিয়ার্স!

Comments

কেবল a { outline: none; }লিঙ্কগুলির জন্য যথেষ্ট হওয়া উচিত।

— অনুদান দিন

গুরুত্বপূর্ণ! কৌশলটি গুরুত্বপূর্ণ, অন্যান্য সমাধানগুলির মধ্যে এটি ছিল না এবং কার্যকর হয়নি। আমার জন্য.

— ক্রিশ্চিয়ানো ফন্টেস

কিন্তু ঘন ঘন আপনি ব্যবহার করা উচিত a { outline: none; }সঙ্গে !important> -a { outline: none !important; }

— joryl

Answer 5

:focus, :active {
    outline: 0;
    border: 0;
}

Comments

আমি যে সিলেক্ট অপশন বক্সটি ব্যবহার করছিলাম তার জন্য মোহন এর মতো কাজ করেছেন

— মুহাম্মদ আহসান

এটি যথেষ্ট নির্দিষ্ট ছিল না, এবং আমি ব্যবহার করতে চাই না! গুরুত্বপূর্ণ বা কেবলমাত্র aউপাদানগুলিকে লক্ষ্যবস্তু করা, তাই আমি হওয়ার জন্য একটি ভাল বিকল্প পেয়েছি body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }

— ইভান ডার্স্ট

Answer 6

[আপডেট] এই সমাধানটি আর কাজ করে না। আমার জন্য যে সমাধানটি কাজ করেছে তা হ'ল এটি একটি https://stackoverflow.com/a/3844452/925560

সঠিক হিসাবে চিহ্নিত উত্তরটি ফায়ারফক্স 24.0 এর সাথে কাজ করে না।

বোতাম এবং অ্যাঙ্কার ট্যাগগুলিতে ফায়ারফক্সের ডটেড আউটলাইনটি সরাতে আমি নীচের কোডটি যুক্ত করেছি:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

আমি এখানে সমাধানটি পেয়েছি: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Comments

এটি আর কাজ করছে না: / যে সমাধানটি কাজ করেছিল তা হ'ল এটি হ'ল স্ট্যাকওভারফ্লো.com

— রেনাটো কারভালহো

Answer 7

এখানে বেশিরভাগ উত্তর চেষ্টা করেছিলাম, কিন্তু তাদের মধ্যে কেউই আমার পক্ষে কাজ করেনি। যখন আমি বুঝতে পেরেছিলাম যে আমাকেও ক্রোমের বোতামের নীল রূপরেখা থেকে মুক্তি দিতে হবে, তখন আমি আরও একটি সমাধান পেয়েছি। Chrome এর CSS কাস্টম-স্টাইলযুক্ত বোতাম থেকে নীল সীমানা সরান Remove

এই কোডটি আমার জন্য উইন্ডোজ on এর ফায়ারফক্স ৩০ সংস্করণে কাজ করেছিল Perhaps সম্ভবত এটি অন্য কারও পক্ষে সাহায্য করতে পারে :)

button:focus {outline:0 !important;}

Comments

এখানে একই জিনিস, এফএফ 38.0.5 এ কাজ করা একমাত্র সমাধান

— অলিভিয়ারএইচ

Answer 8

সিএসএস ব্যবহার করে ফায়ারফক্সে এই বিন্দুযুক্ত ফোকাস সরানোর কোনও উপায় নেই।

আপনার ওয়েব অ্যাপ্লিকেশন যেখানে কাজ করে এমন কম্পিউটারে আপনার যদি অ্যাক্সেস থাকে তবে ফায়ারফক্সে কনফিগার করুন এবং সেট করুন browser.display.focus_ring_width 0 এ করুন Then তারপরে ফায়ারফক্স কোনও বিন্দুযুক্ত সীমানা প্রদর্শন করবে না।

নিম্নলিখিত বাগটি বিষয়টিকে ব্যাখ্যা করেছে: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Comments

ধন্যবাদ এটি ভাল কাজ করে, তবে আমি এর আগে অনেক লিঙ্ক তৈরি করেছি আমি এখন পর্যন্ত এই সমস্যাটি পাই না। তবে এখন আমি বিভ্রান্তিতে আছি তাই উপস্থিত হওয়ার আগের কারণটি কী?

— দুর্গা রাও

এই উত্তর এখন সম্পূর্ণ মিথ্যা। ::-moz-focus-inner {border:0;}অন্যান্য কয়েকটি উত্তরে বর্ণিত হিসাবে সেট করা পুরোপুরি কার্যকর হয়।

— অ্যান্ডি মার্সার

@ অ্যান্ডিম এই উত্তরটি কার্যকর করে। অন্যান্য উত্তরের উপস্থাপনা সমাধান CSS এর জন্য এবং শুধুমাত্র পৃথক সাইটের জন্য কাজ করে।

— রহিল উজির

প্রশ্নটি সিএসএস দিয়ে এটি কীভাবে করা যায় তা জিজ্ঞাসা করে, এবং উত্তর বলে যে এটি হতে পারে না। এটা মিথ্যা। এটা হতে পারে.

— অ্যান্ডি মারসার

Answer 9

ওয়েবে এটির জন্য অনেকগুলি সমাধান পাওয়া যায়, যার মধ্যে অনেকগুলি কাজ করে তবে এইটিকে বাধ্য করার জন্য, যাতে নিখুঁত কোনও কিছুই নিম্নলিখিত ব্যবহারের পরে একবার হাইলাইট / ফোকাস করতে না পারে:

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

এটি কেবল সামান্য কিছুটা অতিরিক্ত সুরক্ষা যুক্ত করে এবং ডিলটি সিল করে!

Answer 10

এটি পরিসীমা নিয়ন্ত্রণ পাবেন:

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

থেকে: ফায়ারফক্সে রেঞ্জ ইনপুট উপাদান থেকে ডটেড আউটলাইন সরান

Comments

অন্য কোনও সমাধান এর জন্য কাজ করে rangeনা

— কামিল কিয়েসজেউস্কি

পারফেক্ট, ফায়ারফক্সে 72 লিনাক্সেও কাজ করে!

— এসডিজফিয়াসড

Answer 11

এই কোডটি ব্যবহার করে ফায়ারফক্স 46 এবং Chrome 49 এ পরীক্ষিত।

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

আগে (সাদা বিন্দু দৃশ্যমান)

পরে (সাদা বিন্দুগুলি অদৃশ্য)

আপনি যদি কেবল কয়েকটি ইনপুট ক্ষেত্র, বোতাম ইত্যাদিতে প্রয়োগ করতে চান তবে আরও নির্দিষ্ট কোডটি ব্যবহার করুন।

input[type=text] {
  outline: none !important;
}

শুভ কোডিং !!

Comments

!importantপ্রয়োজন ছিল আমাকে ফায়ারফক্সের স্টাইলশীট ওভাররাইড করার জন্য। চিয়ার্স!

— SamHH

Answer 12

কেবল নির্বাচিত বাক্সের জন্য এই সিএসএস যুক্ত করুন

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

এটা আমার জন্য ভাল কাজ করছে।

Answer 13

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

যদি কোনও ডিজাইন সমস্যার কারণে আপনার এটি বাইরে নেওয়ার দরকার হয় :focusতবে বোতামটিতে এমন একটি রাজ্য যুক্ত করুন যা এটির পরিবর্তে আরও কিছু ভিজ্যুয়াল কিউ দিয়ে প্রতিস্থাপন করে, যেমন, সীমানাকে আরও উজ্জ্বল রঙে পরিবর্তন করা হয় বা এ জাতীয় কিছু।

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

এবং জেএস ফাংশনটি কখনই ব্যবহার করবেন নাblur() । ::-moz-focus-innerসিউডো ক্লাসটি ব্যবহার করুন ।

Answer 14

বেশিরভাগ ক্ষেত্রে !importantসিএসএস কোডে যোগ না করে, এটি কাজ করবে না।

সুতরাং, যোগ করতে ভুলবেন না !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

বা অন্য কোনও কোড:

button::-moz-focus-inner {
  border: 0 !important;
}

Answer 15

button::-moz-focus-inner { border: 0; }

কোথায় buttonযাই হোক না কেন CSS নির্বাচনকারী যার জন্য আপনি আচরণ অক্ষম করতে চান হতে পারে।

Answer 16

আপনি এ থেকে মুক্তি পাওয়ার চেয়ে ফোকাসকে আরও তীব্র করতে চাইতে পারেন।

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

Comments

@ নাথানকে একটু দেরি হলেও ফোকাস স্টেটে কোনও স্টাইল না রাখাই কীবোর্ডের অভিজ্ঞতায় নষ্ট হবে। আপনি যখন ট্যাব কী টিপছেন তখন আপনি কী কেন্দ্রিক তা জানতে পারবেন না ।

— Hkan

@ হ্যাঙ্ক হ্যাঁ, আমি সম্মত। তবে ফায়ারফক্সের রূপরেখাটি বিশেষত যখন কাস্টম ফোকাস সীমানার কাছাকাছি থাকে তখন কুরুচিপূর্ণ।

— নাথন

@ নাথান আমি এর সাথে পুরোপুরি একমত আমাদের যা করা উচিত তা হল ফোকাস রাষ্ট্রের জন্য আমাদের নিজস্ব স্টাইলিং সরবরাহের পরিবর্তে উপাদানগুলিকে একই অবস্থা হিসাবে তৈরি করা provide

— Hkan

Answer 17

লিঙ্কগুলি, বোতাম এবং ইনপুট উপাদানগুলি থেকে ডটেড আউটলাইন সরান।

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 18

যদি আপনার একটি বোতামে সীমানা থাকে এবং সীমানা না সরিয়ে ফায়ারফক্সে ডটেড আউটলাইনটি গোপন করতে চান (এবং এটি বোতামের অতিরিক্ত প্রস্থ) আপনি ব্যবহার করতে পারেন:

.button::-moz-focus-inner {
    border-color: transparent;
}

Answer 19

নীচের সিএসএস কোড এটিকে সরাতে কাজ করে:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 20

দেখে মনে হচ্ছে এটি অর্জনের একমাত্র উপায় হ'ল সেট করা

browser.display.focus_ring_width = 0

সম্পর্কে: প্রতি ব্রাউজারের ভিত্তিতে কনফিগার করুন।

Answer 21

এটি ফায়ারফক্স ভি -27.0 এ কাজ করে

 .buttonClassName:focus {
  outline:none;
}

Answer 22

উপরের থেকে অনেক অপশন চেষ্টা করার পরে কেবল নিম্নলিখিতটি আমার জন্য কাজ করেছিল।

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Comments

আসলে (কমপক্ষে ফায়ারফক্স in 77 তে), আপনার কেবল দরকার: button:focus { outline: none !important } অথবা আপনি যদি আমাকে পছন্দ করেন না তবে গুরুত্বপূর্ণ, এটি ফায়ারফক্স স্টাইলিংকে ওভাররাইড করতেও কাজ করে: :root button:focus { outline: none }

— জোনাস স্যান্ডস্টেট

Answer 23

বুটস্ট্র্যাপ 3 এর সাথে আমি এই কোডটি ব্যবহার করেছি। দ্বিতীয় সেট বিধিগুলি ফোকাস / সক্রিয় বোতামগুলির জন্য বুটস্ট্র্যাপ কী করে তা পূর্বাবস্থায় ফিরে আসে:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

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

লক্ষ্য করুন যে আপনার কাস্টম সিএসএস ফাইলটি এটির ওভাররাইড করার জন্য আপনার এইচটিএমএল কোডে বুটস্ট্র্যাপ সিএসএস ফাইলের পরে আসা উচিত।

Answer 24

হ্যাঁ মিস করবেন না !

button::-moz-focus-inner {
 border: 0 !important;
}

Comments

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

— মনোক্রোম

Answer 25

আপনি button::-moz-focus-inner {border: 0px solid transparent;}আপনার সিএসএসে চেষ্টা করতে পারেন ।