ইনপুট বোতাম থেকে আউটলাইন বর্ডার কীভাবে সরানো যায়

Question

অন্য কোথাও ক্লিক করলে সীমান্ত অদৃশ্য হয়ে যায়, অনফোকাসের চেষ্টা করে না, তবে সাহায্য করেনি, ক্লিক করার সময় কীভাবে কুশল বোতামের সীমানা অদৃশ্য হয়ে যায়?

input[type="button"] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
}

<input type="button" value="Example Button">

Comments

আমার মোজিলা ব্রাউজারে দুর্দান্ত দেখাচ্ছে

— ড্রিक्सসন ওসিয়া

ফোকাস আয়তক্ষেত্রটি ব্যবহারকারীকে নিরীক্ষণ করতে সাহায্য করেছিল যে ক্লিকটি কার্যকর ছিল এবং এর ফলে তাকে দুর্ঘটনাক্রমে দু'বার ক্লিক করতে বাধা দেয়। সুতরাং আপনি কি নিশ্চিত যে আপনি কোনও সমস্যা সমাধান করছেন এবং একটি তৈরি করছেন না?

— Jukka K. Korpela

একটি ভাল পঠিত a11yproject.com/posts/never-remove-css-outlines

— তাইমুর খান

Answer 1

রূপরেখা ব্যবহার : কোনটি নয়; আমরা ক্রোমে সেই সীমানাটি সরাতে পারি

<style>
input[type="button"]
{
    width:120px;
    height:60px;
    margin-left:35px;
    display:block;
    background-color:gray;
    color:white;
    border: none;
    outline:none;
}
</style>

Comments

ক্রোমে, আমাকে এর পরিবর্তে outline: none;নিয়ম যুক্ত করতে হয়েছিল । input[type="button"]:focusinput[type="button"]

— সুং চ

@ সুংচো: ধন্যবাদ আপনার পদ্ধতি আমাকে সাহায্য করেছিল।

— প্রিয়মঠিয়োনে

Answer 2

ক্রোম এবং এফএফ এর রূপরেখা ফোকাস করুন

সরানো হয়েছে:

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

ডেমো

অ্যাক্সেসযোগ্যতা (A11Y)

/* Don't forget! User accessibility is important */
input[type="button"]:focus {
  /* your custom focused styles here */
}

Answer 3

এটি আমার জন্য সহজভাবে কাজ করে :)

*:focus {
    outline: 0 !important;
}

Comments

এটিই আমার পক্ষে কাজ করার একমাত্র উত্তর, তবে কীভাবে আপনি এটি গুরুত্বপূর্ণ করবেন? আমি প্রচুর উত্স থেকে শুনেছি যে একেবারে প্রয়োজনীয় হলে আপনার কেবল এটি ব্যবহার করা উচিত।

— জয়

আমি এই বোতামটি বাইরের CSS এ পুরো প্রয়োগের জন্য স্টাইলিং করেছি। আপনি যদি এটিকে উপেক্ষা করতে চান তবে প্রতিটি সিডিতে এটি # সিএসএসের সাহায্যে করতে পারবেন: # বোতাম-টাইল {রূপরেখা: 0; } বা প্রতিটি বোতামে # আইডি ছাড়াই সমস্ত বোতামের জন্য একই স্টাইল ব্যবহার করুন, এখানে একটি ডেমো লিঙ্ক রয়েছে : ইনপুট [টাইপ = "বোতাম"] {প্রস্থ: 70px; উচ্চতা: 30px; মার্জিন-বাম: 72px; মার্জিন-শীর্ষ: 15 পিএক্স; প্রদর্শন ব্লক; পটভূমি-রঙ: ধূসর; সাদা রং; সীমানা: কিছুই নয়; রূপরেখা: 0; }

— এক্স-কোডার

Answer 4

এই আমার জন্য কাজ করে

button:focus {
    border: none;
    outline: none;
}

Answer 5

outlineসম্পত্তি আপনার যা প্রয়োজন হয়। এটি নিম্নোক্ত প্রতিটি সম্পত্তি একক ঘোষণায় সেট করার জন্য শর্টহ্যান্ড:

• outline-style
• outline-width
• outline-color

আপনি ব্যবহার করতে পারেন outline: none;, যা গৃহীত উত্তরে প্রস্তাবিত। আপনি চাইলে আপনি আরও সুনির্দিষ্ট হতে পারেন:

button {
    outline-style: none;
}

Answer 6

button:focus{outline:none !important;}

!importantএটি বুটস্ট্র্যাপে ব্যবহৃত হলে যুক্ত করুন

Comments

আমি মনে করি প্রশ্নকর্তা ইতিমধ্যে এটি চেষ্টা করে ফেলেছেন, সর্বোপরি, প্রশ্নটি বলে tried onfocus none, but didn't help।

— স্বচ্ছতার জন্য জেজে এবং মনিকা

Answer 7

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

এই ক্ষেত্রে একটি জমা টাইপ, তবে আপনি একটি টাইপ = "বোতাম" এ প্রয়োগ করতে পারেন।

input[type="submit"]:focus {
    outline: none !important;
    background-color: rgb(208, 192, 74);
}

Answer 8

এটি আপনার ভাবার চেয়ে সহজ greatly বোতামটি কেন্দ্রীভূত করা হলে, outlineএই জাতীয় সম্পত্তি প্রয়োগ করুন :

button:focus {
    outline: 0 !important;
}

তবে আমি যখন noneমান ব্যবহার করি তখন এটি আমার পক্ষে কার্যকর হয় না।

Answer 9

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

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

আরও ভাল এই

.remove-border.focus, .remove-border:focus {
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 }

Answer 10

বোতামের বৈশিষ্ট্য outlineএবং box-shadowবৈশিষ্ট্য উভয়ই সেট করুন এবং noneএগুলি গুরুত্বপূর্ণ করুন ।

input[type="button"] {
    outline: none !important;
    box-shadow: none !important;
} 

মানগুলিকে গুরুত্বপূর্ণ হিসাবে সেট করার কারণ হ'ল আপনি যদি বুটস্ট্র্যাপের মতো অন্যান্য সিএসএস লাইব্রেরি বা ফ্রেমওয়ার্ক ব্যবহার করেন তবে এটি ওভাররাইড হয়ে যেতে পারে।

Answer 11

রূপরেখা সরিয়ে ফেলা একটি অ্যাক্সেসিবিলিটি দুঃস্বপ্ন। কীবোর্ডগুলি ব্যবহার করে ট্যাব করা লোকেরা কখনই জানতে পারবে না যে তারা কী আইটেমে রয়েছে।

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

.no-outline {
  outline: none;
}

তারপরে আপনি যখনই প্রয়োজন সেই ক্লাসটি প্রয়োগ করতে পারেন।

Answer 12

নীচে এইচটিএমএল দেওয়া হয়েছে:

<button class="btn-without-border"> Submit </button>

সিএসএস স্টাইলে নিম্নলিখিতটি করুন:

.btn-without-border:focus {
    border: none;
    outline: none;
}

এই কোডটি বোতামের সীমানা সরিয়ে ফেলবে এবং বোতামটি ক্লিক করা হলে বোতামের সীমানা ফোকাসটি অক্ষম করবে।

Answer 13

যেমনটি অনেকে উল্লেখ করেছেন, selector:focus {outline: none;}এই সীমানাটি সরিয়ে দেবে তবে সেই সীমান্তটি একটি মূল অ্যাক্সেসিবিলিটি বৈশিষ্ট্য যা কীবোর্ড ব্যবহারকারীদের বোতামটি সন্ধান করতে দেয় এবং করা উচিত নয় মুছে ফেলা ।

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

selector:focus {
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;
}

সাধারণভাবে সংক্ষেপে:

selector:focus {
  outline: 1px dashed red;
}