google-chrome - أزل الحد الأزرق من الزر css المخصص في Chrome




(11)

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

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

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

هنا هو CSS الخاص بي:

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

Answers

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

button:focus {outline:0 !important;}

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


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

:active {
    outline:none;
}

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

:active {
   outline:none !important;
}

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


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

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

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

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

فيما يلي أزرار Bootstrap الأساسية الخاصة بك كما تظهر بشكل عادي:

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

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

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

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

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


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

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

هذا ما نجحني:

button:focus {
    box-shadow:none;
}

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

*{
outline: none;
}

أو

*{
outline-style: none;
}

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

input:focus {outline:0;}

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

*:focus {outline:none}

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

*:focus {outline:none !important}

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

element:active:focus {
    outline: 0;
}

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


ما عليك سوى إضافة هذا إلى 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>


تمت إضافة قيم محددة من webkit مفقودة من أعلاه

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */




css google-chrome