it-swarm.asia

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

أنا أعمل على صفحة ويب ، وأريد علامات <button> ذات التصميم المخصص. لذلك مع CSS ، قلت: border: none. يعمل الآن بشكل مثالي في رحلات السفاري ، ولكن في الكروم ، عندما أقوم بالنقر فوق أحد الأزرار ، فإنه يضع حدًا أزرق مزعجًا حوله. اعتقدت أن button:active { outline: none } أو button:focus { outline:none } ستعمل ، لكن لا تعمل. أيه أفكار؟

هذا ما يبدو عليه قبل النقر فوقه (وكيف أريد أن لا يزال يبدو بعد النقر عليه):

وهذه هي الحدود التي أتحدث عنها:

enter image description here

هنا هو بلدي المغلق:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}
645
eshellborn

فقط أضف هذا إلى css الخاص بك:

button:focus {outline:0;}

تحقق منها أو JSFiddle: http://jsfiddle.net/u4pXu/

أو في هذا المقتطف:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

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

button:focus {outline:0;}
<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>
1274
Ronen Cypis

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

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

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

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

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

فيما يلي الأزرار عند تلقي التركيز: Bootstrap Buttons in Focused State

هنا الأزرار عند الضغط عليها: enter image description here

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

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

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

255
Nathan

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

*:focus {outline:none}

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

*:focus {outline:none !important}
53
Mike

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

button:focus {outline:0 !important;}

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

47
Scabbia

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

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

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

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

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

:active {
    outline:none;
}

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

:active {
   outline:none !important;
}

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

8
chuk

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

element:active:focus {
    outline: 0;
}

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

7
Forever Nomad

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

button:focus {
    box-shadow:none;
}
4
Rob Myrick

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

 enter image description here

استخدم هذا:

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

نتيجة:

 enter image description here

3
Behnam Mohammadi

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

*{
outline: none;
}

أو

*{
outline-style: none;
}
3
Santosh Khalse

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

2
Sandeep Sharma

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

input:focus {outline:0;}
2
aaayumi

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

.custom-button {
    outline: none
}
2
apurv thakur

حتى تبدأ جميع المتصفحات الحديثة في دعم 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

2
pavelkarev

هناك طريقة أخرى ل حل مشكلة إمكانية الوصول التي لم يتم ذكرها هنا بعد من خلال القليل من 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);
1
Tobija Fischer

هذه مشكلة في عائلة 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;}

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

1
alexrogins

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

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

}

0
corsaro

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

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