এফএফের নির্বাচন বাক্স থেকে রূপরেখা সরান

Question

একটি নির্বাচিত উপাদানটিতে একটি নির্বাচিত আইটেমের চারপাশে বিন্দুযুক্ত লাইনটি সরিয়ে ফেলা সম্ভব?

আমি outlineসিএসএসে সম্পত্তি যুক্ত করার চেষ্টা করেছি কিন্তু এটি কার্যকর হয়নি, কমপক্ষে এফএফ-তে নয়।

<style>
   select { outline:none; }
</style>

আপডেট
আপনি এগিয়ে যান এবং বাহ্যরেখা সরানোর আগে, দয়া করে এটি পড়ুন।
http://www.outlinenone.com/

Comments

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

— আর্সেনি মরজেনকো

আমি ভীত এটিও সত্য, তবে এখনও ভুল প্রমাণিত হওয়ার আশা করি: ডি

— মার্টিন

মজিলায় আসলে কি এমন মানুষেরা কাজ করছেন যারা মনে করেন যে বোকা বিন্দুযুক্ত রেখাটি ভাল দেখাচ্ছে? কেন এটি আমাদের কিছু অপসারণ করতে হবে?

— বিলেণোহ

Answer 1

আমি একটি সমাধান খুঁজে পেয়েছি, তবে এটি সকল হ্যাকের জননী, আশা করি এটি আরও দৃ .় সমাধানের জন্য একটি সূচনা পয়েন্ট হিসাবে কাজ করবে। নেতিবাচকতা (আমার মতে খুব বড়) হ'ল যে কোনও ব্রাউজার সমর্থন করে না text-shadowতবে সমর্থন করে rgba(IE 9) আপনি পাঠ্য রেন্ডার করতে পারবেন না আপনি যদি না মডার্নিজারের মতো একটি লাইব্রেরি ব্যবহার করেন (পরীক্ষিত নয়, কেবল একটি তত্ত্ব)।

ফোরফক্স বিন্দুযুক্ত সীমানার রঙ নির্ধারণ করতে পাঠ্যের রঙ ব্যবহার করে। সুতরাং যদি আপনি বলেন ...

select {
  color: rgba(0,0,0,0);
}

ফায়ারফক্স বিন্দুযুক্ত সীমানাকে স্বচ্ছ রেন্ডার করবে। তবে অবশ্যই আপনার লেখাটিও স্বচ্ছ হবে! সুতরাং আমরা অবশ্যই একরকম পাঠ্য প্রদর্শিত হবে। text-shadowউদ্ধার করতে আসে:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

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

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

এটি যখন আই 9 খেলতে আসে: এটি সমর্থন করে rgbaতবে পাঠ্য-ছায়া নয়, সুতরাং আপনি একটি খালি নির্বাচন বাক্স পাবেন। text-shadowসনাক্তকরণের সাথে আপনার আধুনিক সংস্করণটি পান এবং করুন ...

.no-textshadow select {
  color: #000;
}

উপভোগ করুন

Comments

ধন্যবাদ সাথী, আমি খুব শীঘ্রই এটিকে একবার চেষ্টা করে দেখব :)

— মার্টিন

একমাত্র সমাধান যা আসলে কাজ করে (এফএফ 20 ব্যবহার করে)। অভিনন্দন!

— গিলবার্তো তোরেজান

এটি প্রতিটি এফএফ এবং কেবলমাত্র এফএফের যত্ন নেওয়া উচিত:@-moz-document url-prefix() { ::-moz-focus-inner {border: none} select:-moz-focusring { color: transparent; text-shadow: 0px 0px 0px #000; } }

— টিমো কাহকেনেন

এটি ক্রোম এবং অন্যান্য ব্রাউজারগুলিতে সিএসএসকে প্রভাবিত করবে?

— দধীচ সৌরভ

Answer 2

ঠিক আছে, ডুওপিক্সেলের উত্তর পুরোপুরি নিখুঁত। আমরা আরও একধাপ এগিয়ে গেলে আমরা এটিকে বুলেটপ্রুফ তৈরি করতে পারি।

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

আপনি সেখানে যান, কেবল ফায়ারফক্সের জন্য বৈধ এবং নির্বাচিত বিকল্পের চারপাশে কুৎসিত বিন্দুযুক্ত রেখাটি চলে যায়।

Comments

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

— জন

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

— জন

অবশ্যই আপনি যদি একটি রূপান্তর নির্দিষ্ট করে তা উপস্থিত হবে। allরূপান্তরগুলির মধ্যে ব্যবহার করা উড়তে একটি গ্যাটলিং বন্দুক দিয়ে গুলি চালানোর মতো।

— ফ্লেশগ্রিন্ডার

এই বা ডুওপিক্সেলের সমাধান ম্যাক মাভেরিক্সে এফএফ 33.0.3 এ কাজ করে না। ডটেড আউটলাইনটির পরিবর্তে একটি নীল অস্পষ্ট রূপরেখা রয়েছে।

— টিমো কাহকেনেন

এটি অক্ষম বিকল্পগুলিতে ব্রাউজার শৈলীগুলি ভেঙে দেয় - ফোকাসে একবার নির্বাচিত হয়ে গেলে তারা হওয়া উচিত ধূসর বর্ণের পরিবর্তে কালো হয়ে যায়।

— বিলিএনাহ

Answer 3

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

শ্রেণি প্রশ্ন অনুসারে রূপরেখা সরিয়ে দেয় তবে যে কোনও পটভূমি চিত্র সরিয়ে দেয় (আমি সাধারণত একটি কাস্টম ড্রপডাউন তীর ব্যবহার করি এবং ফায়ারফক্স সিস্টেমের ড্রপডাউন তীরটি বর্তমানে সরানো যায় না)। ড্রপডাউন চিত্র ব্যতীত অন্য কোনও কিছুর জন্য পটভূমি চিত্র ব্যবহার করা হলে, কেবল লাইনটি সরিয়ে দিনbackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Comments

এখনও এই পদ্ধতিটি ব্যবহার করে বিকল্প পাঠ্যের রঙ সংজ্ঞায়িত করার উপায় আছে কি?

— ব্যবহারকারী 1063287

আসলে আপনি নির্বাচন পটভূমিতে ব্যবহৃত বিক্রেতা-নির্দিষ্ট সম্পত্তি সেটিং দ্বারা ফায়ারফক্স তীর অপসারণ করতে পারেন -moz-appearanceথেকে none।

— যোদাবার

অন্যান্য উত্তরের গুরুত্বপূর্ণ select::-moz-focus-innerনির্বাচকের অভাব রয়েছে , সেগুলি কম কার্যকর করে। এই জন্য এটি আমার পায় ⬆

— ডেভ ল্যান্ড

select:-moz-focusringপাশাপাশি color: transparentএবং text-shadow: 0 0 0 #000ফায়ারফক্স ভি in৩

— জেসন মুর

দ্রষ্টব্য: ইউআরএল-উপসর্গ ()। fxsitecompat.dev/en-CA/docs/2018/… লিঙ্কগুলি পড়লে আমি তা পরিষ্কার করে দেখতে পাচ্ছি না যে তারা এটি পর্যায়ক্রমে চলে যাচ্ছে কিনা। তবে পরামর্শ দেওয়া হবে।

— ব্যবহারকারী3342816

Answer 4

এটি সমস্ত ফায়ারফক্স সংস্করণকে লক্ষ্য করবে

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

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

Comments

এটি নির্বাচিত উত্তর হওয়া উচিত

— ব্র্যান্ডসক্রিপ্ট

Answer 5

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

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

Comments

থেক্স, আমি অনুমান করি এটি সম্পাদন করার জন্য আমাকে "নিজের নিজস্ব" নির্বাচনী তালিকা তৈরি করতে হবে। খুব খারাপ যে ফর্ম নিয়ন্ত্রণগুলি ব্রাউজারগুলিতে আরও অভিন্ন নয়।

— মার্টিন

@ মার্টিন: এটি কোনও ফাইল আপলোড নিয়ন্ত্রণের জটিলতার তুলনায় কিছুই নয়, যা বেশিরভাগ ব্রাউজারে স্টাইল করা যায় না । ;)

— আর্সেনি মরজেনকো

Answer 6

<select onchange="this.blur();">

আপনি যদি এটি ব্যবহার করেন তবে আপনি তালিকা থেকে কোনও আইটেম নির্বাচন না করা অবধি সীমানা স্থির থাকে।

Comments

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

— যোদাবার

Answer 7

এর মধ্যে একটি ব্যবহার করে দেখুন:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

রেফারেন্স

Comments

প্রচেষ্টার জন্য Thx, কিন্তু দুর্ভাগ্যক্রমে এটি কার্যকর হয়নি। হতে পারে এটি কোনও aউপাদান নিয়ে কাজ করে , তবে এটি কোনও selectউপাদানটিতে কাজ করে না ।

— মার্টিন

Answer 8

এখানে সমাধান আসে

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

Comments

পরীক্ষিত। কাজ করে না। ফায়ারফক্স এই সম্পত্তিটিকে স্বীকৃতি দেয় তবে এটি কিছুই করার জন্য উপস্থিত হয় না। এটিতে সেট করার চেষ্টা করা হয়েছে 10px solid redএবং এটি কোথায় প্রদর্শিত হবে তা আমি খুঁজে পাচ্ছি না।

— এমপেন

অন্যান্য উচ্চতর ভোটের উত্তরগুলি না দিলে এটি আসলে আমার পক্ষে কাজ করেছিল।

— তাশোস

Answer 9

ফায়ারফক্স সমস্ত নির্বাচনযোগ্য ট্যাগ থেকে আউটলাইন / বিন্দুযুক্ত সীমানা সরান।

আপনার স্টাইল শীটে কোডের এই লাইনটি রাখুন:

*:focus{outline:none !important;}   

Answer 10

যোগ একটিও না: সীমান্ত-শৈলী CSS এর আপনার নির্বাচন করুন।

select {
border-style: none; }

Answer 11

পদক্ষেপ 1) এইচটিএমএল যুক্ত করুন: আপনার পছন্দের নির্বাচনের বিকল্পগুলি যুক্ত করুন এবং বৈশিষ্ট্য যুক্ত করুন: কনটেনটেটেবল = "সত্য"

পদক্ষেপ 2) সিএসএস যুক্ত করুন: বিতর্কযোগ্য all

[contenteditable] {
  outline: 0px solid transparent;
}
select {
  border: none;
}

<select contenteditable="true">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Answer 12

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

কাজ 100%

Answer 13

এটি selectউপাদান এবং বাহ্যরেখা থেকে ফোকাস সরিয়ে ফেলবে :

$("select").click(function(){
    $(this).blur();
});

যদিও এটি অন্যান্য ব্রাউজারগুলিতে এর কমতিগুলি ছাড়াই নয়। আপনি ব্যবহারকারী যে ব্রাউজারটি ব্যবহার করছেন তা পরীক্ষা করতে চাইবেন:

if (FIREFOX) {
    //implement the code
}

Comments

কোড স্নিপেট সরবরাহ করার পাশাপাশি আপনার কোড স্নিপেট কী করে দয়া করে তা ব্যাখ্যা করুন।

— সায়ান