css color إزالة الأزرق "المحدد" الخطوط العريضة على الأزرار



css ماهو (4)

لدي بعض الأزرار باستخدام <button> ، والتي عند النقر عليها تحصل على لون أزرق محدد!

هل هناك طريقة لإزالة هذه الميزة؟


Answer #1

يمكنك إزالة هذا بإضافة! مهم لمخططك.

button{
 outline: none !important;
}

Answer #2

هذا هو السلوك الافتراضي لكل مستعرض. يبدو أن متصفحك هو Safari ، وهو ذو لون برتقالي في Google Chrome!

استخدم هذا لإزالة هذا التأثير:

button {
  outline: none; // this one
}


Answer #4

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

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

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

أوصي بشدة باستخدام هذا الإصلاح: 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;}

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





css