কীভাবে ইনপুট পাঠ্যের উপাদানটিতে সীমানা হাইলাইট সরানো যায়

Question

যখন কোনও এইচটিএমএল উপাদান 'ফোকাসড' হয় (বর্তমানে নির্বাচিত / এতে ট্যাবড রয়েছে), তখন অনেকগুলি ব্রাউজার তার চারপাশে একটি নীল সীমানা রাখে।

আমি যে লেআউটটিতে কাজ করছি তার জন্য, এটি বিভ্রান্তিকর এবং সঠিক দেখাচ্ছে না।

<input type="text" name="user" class="middle" id="user" tabindex="1" />

ফায়ারফক্স এটি করেছে বলে মনে হচ্ছে না, বা কমপক্ষে আমাকে এটি দিয়ে এটি নিয়ন্ত্রণ করতে দেবে:

border: x;

আইই কীভাবে পারফর্ম করে কেউ যদি আমাকে বলতে পারে তবে আমি কৌতূহলী হয়ে উঠব।

এই অল্প বিড়ম্বনা দূর করতে সাফারি পাওয়া ভাল লাগবে।

Answer 1

আপনার ক্ষেত্রে, চেষ্টা করুন:

input.middle:focus {
    outline-width: 0;
}

বা সাধারণভাবে, সমস্ত মৌলিক ফর্ম উপাদানগুলি প্রভাবিত করতে:

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

---

মন্তব্যে নোহ হুইটমোরcontenteditable এট্রিবিউট রয়েছে এমন উপাদানগুলিকে সমর্থন করার জন্য এটি আরও এগিয়ে নেওয়ার পরামর্শ দিয়েছেন true(কার্যকরভাবে তাদেরকে এক ধরণের ইনপুট উপাদান তৈরি করে)। নিম্নলিখিতগুলিতেও সেগুলি লক্ষ্য করা উচিত (CSS3 সক্ষম ব্রাউজারগুলিতে):

[contenteditable="true"]:focus {
    outline: none;
}

যদিও আমি এটা না করার পরামর্শ দিচ্ছি, সম্পন্নতা 'হেতু জন্য, আপনি সবসময় ফোকাস রূপরেখা অক্ষম পারে সবকিছু এই সঙ্গে:

*:focus {
    outline: none;
}

মনে রাখবেন যে ফোকাসের রূপরেখাটি একটি অ্যাক্সেসযোগ্যতা এবং ব্যবহারযোগ্যতা বৈশিষ্ট্য; এটি বর্তমানে ব্যবহারকারীকে কী উপাদানটিতে ফোকাস করছে তা ক্লু করে।

Comments

ধন্যবাদ কোরি, দুর্দান্ত টিপ। সমস্ত ইনপুট ক্ষেত্রগুলি কভার করার জন্য আপনাকে টেক্সারিয়াতে সিএসএসও নিয়োগ করতে হবে। input:focus, textarea:focus {outline: none;}

— ব্যারনগ্রাইভ

পাশাপাশি নির্বাচন করতে ভুলবেন নাselect:focus {outline:none;}

— গিক নুম 88

এছাড়াও <button>অন্যান্য জিনিসগুলির মধ্যে, jQuery ইউআই এবং টুইটার বুটস্ট্র্যাপ দ্বারা ব্যবহৃত ট্যাগটি রয়েছে, তাই আমি button: focusসম্পূর্ণতার জন্য তালিকায় যুক্ত করব।

— ক্রিস পার্টন

আমার অভিজ্ঞতায় এটি ফোকাস ছাড়াই ঘটতে পারে, button, button:focus { outline:none; }

— মাইক লিয়নস

@ সি you আপনি আপনার প্রশ্নের একেবারে শীর্ষে এ 11y এবং ব্যবহারযোগ্যতা সম্পর্কে নোটটি সরানোর বিষয়ে মনে করবেন? আইএমও এটি আপনার উত্তরকে ব্যাপকভাবে উন্নত করবে কারণ এ 11y বৈশিষ্ট্যগুলি অপসারণ করা একটি খারাপ অভ্যাস।

— জোসেফ এঞ্জেলফ্রস্ট

Answer 2

সমস্ত ইনপুট থেকে এটি সরাতে

input {
 outline:none;
}

Answer 3

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

বাহ্যরেখা বৈশিষ্ট্যটি একটি কারণে রয়েছে - ব্যবহারকারীদের কীবোর্ড ফোকাসের স্পষ্ট ইঙ্গিত প্রদান করে। এই বিষয় সম্পর্কে আরও পড়ার এবং অতিরিক্ত উত্সের জন্য দেখুন http://outlinenone.com/

Comments

বোয়াজ, এফওয়াইআই ইনপুট.মিল্ড {আউটলাইন: কোনওটিই নয় still আপনাকে এখনও উপাদানগুলির মধ্যে প্রবেশের অনুমতি দেবে না (ইনপুট.মিল্ড সহ)। ট্যাব কী টিপলে ইনপুট ট্যাগটিতেও মনোযোগ দেওয়া হবে। কেবলমাত্র এটি হ'ল আপনি এতে ফোকাস (রূপরেখা ফোকাস) দেখতে পারবেন না। সুতরাং এটি ব্যবহার করা এটি ক্ষতিকারক নয় ..:)

— আনিস নায়ের

@ আনিশনার Only thing is that you won't be able to see the focus(outline focus) on it- এবং এটি আমার বক্তব্য। রূপরেখা সরিয়ে ফোকাস ইভেন্টের ভিজ্যুয়াল ইঙ্গিতকে অক্ষম করে , আসল ইভেন্টটি নয়। ভিজ্যুয়াল ইঙ্গিতটি অপসারণ করার অর্থ আপনি সেই প্রতিবন্ধী ব্যক্তিদের পক্ষে যারা আরও ভালভাবে এই ইঙ্গিতটিতে নির্ভর করেন তাদের পক্ষে আরও শক্ত করে তোলেন।

— বোয়াজ - মনিকা

কখনও কখনও আমাদের কিছু অর্জনের জন্য আপস করা দরকার:)

— আনিশ নায়ার

পছন্দ করুন তবে প্রায়শই বেশি লোক এই থ্রেডটি পড়ার সাথে সাথে outline:none;এর প্রভাবগুলি বিবেচনা না করে সহজেই বেরিয়ে আসার সহজ উপায়টি পছন্দ করবে (যেমন )। কিছু সহজ এবং সময় সাশ্রয় করার কারণে, এর অর্থ এটি সর্বোত্তম অনুশীলন নয় :)

— বোয়াজ - মনিকা পুনরায়

আমি আলোচনায় দেরি করছি, তবে আপনি ইনপুটগুলির কেন্দ্রীভূত অবস্থার (সীমানার রঙ বা প্রস্থ পরিবর্তন করার মতো) স্টাইল করতে পারেন। এটি করার সময় আপনি যখন অ্যাক্সেসযোগ্যতার কথা মনে রাখেন (ভাল বৈসাদৃশ্য ইত্যাদি), এটি ডিফল্ট রূপরেখার মতোই অ্যাক্সেসযোগ্য।

— মেগ

Answer 4

এটি একটি সাধারণ উদ্বেগ।

ব্রাউজারগুলি যে ডিফল্ট রূপরেখা দেয় তা কুশ্রী।

উদাহরণস্বরূপ এটি দেখুন:

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

---

সর্বাধিক সাধারণ "ফিক্স" যা সবচেয়ে বেশি সুপারিশ করে তা outline:none- যা যদি ভুলভাবে ব্যবহার করা হয় - এটি অ্যাক্সেসযোগ্যতার জন্য দুর্যোগ।

---

সুতরাং ... যাইহোক বাহ্যরেখা ব্যবহার কি?

আমি একটি খুব শুকনো কাট ওয়েবসাইট পেয়েছি যা সবকিছু ভালভাবে ব্যাখ্যা করে।

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

ঠিক আছে, আসুন উপরের মত একই উদাহরণ দিয়ে দেখতে চেষ্টা করুন, এখন TABনেভিগেট করতে কীটি ব্যবহার করুন ।

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

লক্ষ্য করুন আপনি কীভাবে ইনপুট ক্লিক না করে ফোকাস কোথায় তা বলতে পারবেন?

এখন, আসুন outline:noneআমাদের বিশ্বস্ত চেষ্টা করুন<input>

সুতরাং, আবারও, TABপাঠ্যটি ক্লিক করার পরে নেভিগেট করতে কীটি ব্যবহার করুন এবং দেখুন কী ঘটে।

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

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

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

এখন যদি আমরা রূপরেখা রাখি তবে এটি একই টেম্পলেটটির সাথে তুলনা করুন:

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

সুতরাং আমরা নিম্নলিখিতটি প্রতিষ্ঠিত করেছি

1. রূপরেখাগুলি কুৎসিত
2. এগুলি অপসারণ জীবনকে আরও কঠিন করে তোলে।

---

তাহলে উত্তর কি?

কুরুচিপূর্ণ রূপরেখা সরান এবং ফোকাস নির্দেশ করতে আপনার নিজস্ব ভিজ্যুয়াল সংকেত যোগ করুন।

আমি কী বোঝাতে চাইছি তার একটি খুব সাধারণ উদাহরণ এখানে।

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

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

সুতরাং, আমরা আমাদের "রিয়েল-ওয়ার্ল্ড" উদাহরণ দিয়ে উপরের পদ্ধতির চেষ্টা করেছি:

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}

<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

এই বাহ্যিক লাইব্রেরি ব্যবহার করে আরও বাড়ানো যেতে পারে যে, "রূপরেখা" পরিবর্তন মত সম্পূর্ণরূপে এটি সরানোর বিরোধিতা ধারণার উপর বিল্ড সত্যে পরিণত

আপনি এমন কিছু দিয়ে শেষ করতে পারেন যা অশুভ নয় এবং খুব অল্প প্রচেষ্টা নিয়ে কাজ করে

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

Answer 5

এটি আমাকে কিছু সময়ের জন্য বিভ্রান্ত করেছিল যতক্ষণ না আমি আবিষ্কার করলাম লাইনটি কোনও সীমানা বা বাহ্যরেখা নয়, এটি একটি ছায়া। সুতরাং এটি অপসারণ করতে আমাকে এটি ব্যবহার করতে হয়েছিল:

input:focus, input.form-control:focus {

    outline:none !important;
    outline-width: 0 !important;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

Answer 6

আপনি এটি অক্ষম করতে সিএসএস ব্যবহার করতে পারেন! নীল বর্ডারটি অক্ষম করার জন্য আমি এই কোডটি ব্যবহার করি:

*:focus {
outline: none;
}

এটি নীল বর্ডারটি সরিয়ে দেবে!

এটি একটি কার্যনির্বাহী উদাহরণ: জেএসফিডাল.নাট

আশা করি এটা সাহায্য করবে!

Answer 7

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

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

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

আমি এটি এইভাবে করি:

// detect keyboard users

const keyboardUserCssClass = "keyboardUser";

function setIsKeyboardUser(isKeyboard) {
  const { body } = document;
  if (isKeyboard) {
   body.classList.contains(keyboardUserCssClass) || body.classList.add(keyboardUserCssClass);
  } else {
   body.classList.remove(keyboardUserCssClass);
  }
}

// This is a quick hack to activate focus styles only when the user is
// navigating with TAB key. This is the best compromise we've found to
// keep nice design without sacrifying accessibility.
document.addEventListener("keydown", e => {
  if (e.key === "Tab") {
   setIsKeyboardUser(true);
  }
});
document.addEventListener("click", e => {
  // Pressing ENTER on buttons triggers a click event with coordinates to 0
  setIsKeyboardUser(!e.screenX && !e.screenY);
});

document.addEventListener("mousedown", e => {
  setIsKeyboardUser(false);
});

body:not(.keyboardUser) *:focus {
  outline: none;
}

<p>By default, you'll see no outline. But press TAB key and you'll see focussed element</p>
<button>This is a button</button>
<a href="#">This is anchor link</a>
<input type="checkbox" />
<textarea>textarea</textarea>
<select/>

Comments

এটি একটি সম্পূর্ণ পদ্ধতির। clickশ্রোতা একটা চমৎকার স্পর্শ হয়।

— কীথ ডিসি

Answer 8

আমি সব উত্তর চেষ্টা এবং আমি এখনও কাজ করার খনি পাই নি মোবাইল যতক্ষণ না পাওয়া -webkit-tap-highlight-color।

সুতরাং, আমার জন্য যা কাজ করেছে তা হ'ল ...

* { -webkit-tap-highlight-color: transparent; }

Comments

সমাধানটি আমি অনুসন্ধান করেছিলাম। এটি বিশেষত কার্যকর যখন আপনি লি

— আনন্দ জি

Answer 9

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

input:focus {
    outline: 0;
}

Answer 10

আমার সাথে কাজ করা একমাত্র নির্জনতা

input[type="text"]:focus{
     box-shadow: 0 0 0 rgb(255, 255, 255);
}

 input[type="checkbox"]:focus{
      box-shadow: 0 0 0 rgb(255, 255, 255);
 }

Answer 11

ফায়ারফক্সে সমাধানের কোনওটিই আমার পক্ষে কাজ করেনি।

নিম্নলিখিত সমাধানটি ফায়ারফক্সের জন্য ফোকাসে সীমানা শৈলীর পরিবর্তন করে এবং অন্যান্য ব্রাউজারগুলির জন্য কোনও রূপরেখা সেট করে না।

আমি কার্যকরভাবে ফোকাস সীমানাকে 3px নীল আভা থেকে একটি সীমানা শৈলীতে যেতে পাঠ্য অঞ্চল সীমানার সাথে মেলে matches এখানে কয়েকটি সীমান্ত শৈলী:

ড্যাশড বর্ডার (সীমানা 2px ড্যাশযুক্ত লাল):

সীমানা নেই! (সীমানা 0px):

টেক্সারিয়া বর্ডার (সীমানা 1px কঠিন ধূসর):

কোডটি এখানে:

input:focus, textarea:focus {
    outline: none; /** For Safari, etc **/
    border:1px solid gray; /** For Firefox **/
}

#textarea  {
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  width:calc(100% - 20px);
  height:160px;
  display:inline-block;
  margin-top:-0.2em;
}

<textarea id="textarea">yo</textarea>

Answer 12

আপনি এটি চেষ্টা করতে পারেন

input[type="text"] {
outline-style: none;
}

অথবা

.classname input{
outline-style: none;
}

Answer 13

আপনি টেক্সট / ইনপুট বাক্সগুলির চারপাশে কমলা বা নীল রঙের সীমানা (আউটলাইন) সরিয়ে ফেলতে পারেন: আউটলাইন: কোনওটি নয়

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
    outline:none !important;
}

Answer 14

সিএসএস সম্পত্তি নীচে ব্যবহার করে যখন উপাদানটিতে ফোকাস থাকে তখন রূপরেখা সরিয়ে ফেলুন:

input:focus {
    outline: 0;
}

এই সিএসএস বৈশিষ্ট্যটি ফোকাসের সমস্ত ইনপুট ক্ষেত্রগুলির জন্য রূপরেখা সরিয়ে দেয় বা সিএসএস সম্পত্তি নীচে ব্যবহার করে উপাদানটির রূপরেখা সরিয়ে ফেলতে সিউডো ক্লাস ব্যবহার করবে।

.className input:focus {
    outline: 0;
} 

এই বৈশিষ্ট্যটি নির্বাচিত উপাদানগুলির জন্য রূপরেখা সরিয়ে দেয়।

Answer 15

এটা চেষ্টা কর

*:focus {
    outline: none;
}

এটি আপনার পৃষ্ঠাতে কার্যকর হবে