كيفية إزالة تبرز الحدود على عنصر نص الإدخال

Question

عندما يكون عنصر HTML هو "مركز" (محددا حاليا / مبادلة في)، فإن العديد من المتصفحات (على الأقل سفاري والكروم) ستقوم بوضع حد أزرق حولها.

بالنسبة للتخطيط، أعمل على ذلك، وهذا يشتت الانتباه ولا يبدو صحيحا.

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

---

في التعليقات، نوح whitmore. اقترح أخذ هذا حتى أكثر لدعم العناصر التي لها contenteditable سمة مجموعة على true (جعلها فعليا نوع من عنصر الإدخال). يجب أن يستهدف ما يلي تلك أيضا (في المتصفحات CSS3 قادرة):

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

على الرغم من أنني لن أوصي به، من أجل اكتمال "، يمكنك دائما تعطيل الخطوط العريضة التركيز على كل شيء مع هذا:

*:focus {
    outline: none;
}

ضع في اعتبارك أن مخطط التركيز هو ميزة إمكانية الوصول وإمكانية استخدامها؛ من القرائن المستخدم في العنصر الذي يركز حاليا حاليا.

Answer 2

لإزالته من جميع المدخلات

input {
 outline:none;
}

Answer 3

هذا موضوع قديم، ولكن للإشارة من المهم ملاحظة أن تعطيل مخطط عنصر الإدخال غير مستحسن كما يعيق إمكانية الوصول.

توجد خاصية المخطط التفصيلي لسبب - توفير المستخدمين مع مؤشر واضح على تركيز لوحة المفاتيح. لمزيد من القراءة ومصادر إضافية حول هذا الموضوع http://outlinenone.com/

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

يمكنك استخدام CSS لتعطيل ذلك! هذا هو الرمز الذي أستخدمه لتعطيل الحدود الزرقاء:

*:focus {
outline: none;
}

هذا سوف يزيل الحدود الزرقاء!

هذا هو مثال عمل: jsfiddle.net.

آمل أن يساعد!

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

Answer 8

استخدم هذا الرمز:

input:focus {
    outline: 0;
}

Answer 9

حاولت كل الإجابات وما زلت لا أستطيع الحصول على الألغام للعمل عليها متحرك, ، حتى وجدت -webkit-tap-highlight-color.

لذلك، ما الذي نجح بالنسبة لي هو ...

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

Answer 10

لم تنجح أي من الحلول بالنسبة لي في فايرفوكس.

يغير الحل التالي نمط الحدود على التركيز ل Firefox ويضع الخطوط العريضة للحصول على متصفحات أخرى.

لقد جعلت حدود التركيز بشكل فعال، انتقل من توهج أزرق من 3PX إلى نمط حدود يطابق حدود منطقة النص. إليك بعض الأساليب الحدودية:

الحدود المتقطعة (الحدود 2px متقطع حمراء):

ليس لها حدود! (الحدود 0PX):

حدبة Textarea (الحدود 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 11

يمكنك تجربة هذا أيضا

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

أو

.classname input{
outline-style: none;
}

Answer 12

قم بإزالة المخطط التفصيلي عند التركيز على عنصر، باستخدام خاصية CSS أدناه:

input:focus {
    outline: 0;
}

يزيل خاصية CSS هذه الخطوط العريضة لجميع حقول الإدخال على التركيز أو استخدام فئة Pseudo لإزالة الخطوط العريضة للعنصر باستخدام خاصية CSS أدناه.

.className input:focus {
    outline: 0;
} 

يزيل هذا العقار الخطوط العريضة للعنصر المحدد.

Answer 13

جرب هذا أيضا

.form-group input {

  display: block;
  background: none;
  padding: 0.175rem 0.175rem 0.0875rem;
  font-size: 1.4rem;
  border-width: 0;
  border-color: transparent;
  line-height: 1.9;
  width: 100%;
  color: #ccc;
  transition: all 0.28s ease;
  box-shadow: none;

}

Answer 14

يمكنك إزالة الحدود البرتقالية أو الأزرق (الخطوط العريضة) حول مربعات النص / الإدخال باستخدام: الخطوط العريضة: بلا

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