أزل الحدود الزرقاء من زر css المخصص في Chrome

انتظر! هناك سبب لهذا المخطط القبيح!

قبل إزالة المخطط الأزرق القبيح ، قد ترغب في أخذ إمكانية الوصول بعين الاعتبار. افتراضيًا ، يتم وضع المخطط الأزرق على عناصر قابلة للتركيز. هذا حتى يتمكن المستخدمون الذين يعانون من مشكلات في الوصول من التركيز على هذا الزر عن طريق الجدولة إليه. بعض المستخدمين ليس لديهم المهارات الحركية لاستخدام الماوس ويجب عليهم استخدام لوحة المفاتيح فقط (أو بعض أجهزة الإدخال الأخرى) للتفاعل مع الكمبيوتر. عند إزالة المخطط التفصيلي الأزرق ، لم يعد هناك مؤشر مرئي على العنصر المركّز. إذا كنت ستقوم بإزالة المخطط التفصيلي الأزرق ، فأنت يجب استبداله بنوع آخر من الإشارات المرئية التي تركز على الزر.

الحل الممكن: أزرار معتمة عند التركيز

بالنسبة إلى الأمثلة أدناه ، تمت إزالة مخطط Chrome الأزرق لأول مرة باستخدام button:focus { outline:0 !important; }

إليك أزرار Bootstrap الأساسية كما تظهر بشكل طبيعي: 

فيما يلي الأزرار عند تلقي التركيز: 

هنا الأزرار عند الضغط عليها: 

كما ترون ، الأزرار تكون أغمق قليلاً عندما تتلقى التركيز. شخصيا ، أوصي بجعل الأزرار المركزة أكثر قتامة بحيث يكون هناك فرق ملحوظ بين حالة التركيز والحالة الطبيعية للزر.

ليس فقط للمستخدمين المعاقين

إن جعل الوصول إلى موقعك أكثر سهولة هو أمر غالبًا ما يتم تجاهله ولكن يمكن أن يساعد في إنشاء تجربة أكثر إنتاجية في موقع الويب الخاص بك. هناك العديد من المستخدمين العاديين الذين يستخدمون أوامر لوحة المفاتيح للتنقل عبر مواقع الويب للحفاظ على لوحة المفاتيح.

أود فقط إزالة المخطط التفصيلي من جميع العلامات الموجودة في الصفحة عن طريق تحديد الكل وتطبيق المخطط:

*:focus {outline:none}

كما ذكر bagofcole ، قد تحتاج إلى إضافة! مهم أيضًا ، لذلك سيبدو النمط كما يلي:

*:focus {outline:none !important}

لا تنسَ إعلان !important ، للحصول على نتيجة أفضل

button:focus {outline:0 !important;}

سيتم دائمًا تطبيق قاعدة لها الخاصية الهامة بغض النظر عن مكان ظهور هذه القاعدة في مستند CSS.

في حالتي في هذه المشكلة ، كان علي تحديد box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

أضف هذا في ملف CSS الخاص بك.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

استخدم إما هذا:

:active {
    outline:none;
}

أو هذا إذا لم ينجح ذلك:

:active {
   outline:none !important;
}

هذا يعمل لي (FF و Chrome ، على الأقل). بدلاً من استهداف حالة :focus ، ما عليك سوى استهداف حالة :active وسيؤدي ذلك إلى إزالة التمييز النحيف الجمالي في المتصفح عندما ينقر المستخدم على الرابط. ولكن سيظل يحتفظ بحالات التركيز عند علامات تبويب مستخدم معاق أو علامات تبويب التحول من خلال صفحة. كلا الطرفين سعداء. :)

لأي شخص يستخدم Bootstrap ويواجه هذه المشكلة ، فإنه يستخدم: active: focus وكذلك فقط: active و: focus لذلك ستحتاج إلى:

element:active:focus {
    outline: 0;
}

نأمل أن ينقذ شخص ما بعض الوقت في معرفة ذلك ، فقد خبط رأسي قليلاً لنتساءل عن سبب عدم عمل شيء بسيط.

هذا هو ما نجح لي:

button:focus {
    box-shadow:none;
}

لهذه المشكلة:

استخدم هذا:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

نتيجة:

جرب هذا الرمز لجميع العناصر التي لديها مشكلة الحدود الزرقاء

*{
outline: none;
}

أو

*{
outline-style: none;
}

ببساطة اكتب outline:none;. لا حاجة لاستخدام عنصر الزائفة focus

إذا كنت تريد حذف التأثير نفسه في الإدخال ، فيمكنك إضافة الرمز التالي وكذلك الزر.

input:focus {outline:0;}

واجهت نفس المشكلة لذلك استخدمت CSS- بسيطة

.custom-button {
    outline: none
}

حتى تبدأ جميع المتصفحات الحديثة في دعم css-selector: focus-visual ،
الطريقة الأبسط وربما الأفضل لـ حفظ إمكانية الوصول هي إزالة هذا التركيز الصعب فقط لمستخدمي الماوس وحفظه لمستخدمي لوحة المفاتيح :

1. استخدم هذا polyfill الصغير (حوالي 10 كيلو بايت): https://github.com/WICG/focus-visible
2. أضف الكود التالي في مكان ما في المغلق الخاص بك:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

دعم المستعرض لـ css4-selector: التركيز البؤري الآن ضعيف جدًا:
https://caniuse.com/#search=focus-visible

هناك طريقة أخرى ل حل مشكلة إمكانية الوصول التي لم يتم ذكرها هنا بعد من خلال القليل من Javascript . الاعتمادات تذهب هذه المدونة الثاقبة من hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

الأسلوب هنا بسيط للغاية ولكنه فعال: إضافة فصل دراسي عندما يبدأ الأشخاص في استخدام مفتاح علامة التبويب للتنقل في الصفحة (وإزالته اختياريًا عند التبديل إلى الماوس مرة أخرى. ثم يمكنك استخدام هذه الفئة لأي عرض مخطط التركيز أم لا.

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

هذه مشكلة في عائلة Chrome وهي موجودة إلى الأبد.

تم رفع خطأ https://bugs.chromium.org/p/chromium/issues/detail؟id=904208

يمكن عرضه هنا: https://codepen.io/anon/pen/Jedvwj بمجرد إضافة حد إلى أي شيء يشبه زر (قل دور تمت إضافة "زر" إلى علامة على سبيل المثال ) عبث Chrome وضبط حالة التركيز عند النقر بالماوس.

أوصي بشدة باستخدام هذا الإصلاح: https://github.com/wicg/focus-visible .

فقط قم بما يلي

npm install --save focus-visible

أضف النص البرمجي إلى html:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

أو قم بالاستيراد إلى ملف الإدخال الرئيسي الخاص بك إذا كنت تستخدم حزمة الويب أو شيء مشابه:

import 'focus-visible/dist/focus-visible.min';

ثم ضع هذا في ملف css الخاص بك:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: Magenta auto 5px;
}

أنت يمكنك مجرد مجموعة:

button:focus {outline:0;}

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

واجهت نفس المشكلة مع bootstrap ، لقد تم حلها مع كل من المخطط التفصيلي والظل المربع

.btn:focus, .btn.focus {
outline: none!important;
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0)!importamt; // Or none

}

الإصلاح لمتصفح Chrome والمتصفحات الأخرى

button:focus { outline: none !important; box-shadow: none !important; }