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




web google (8)

أعمل على صفحة ويب وأريد علامات <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;
}

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

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

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

*:focus {outline:none}

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

*:focus {outline:none !important}

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

:active {
    outline:none;
}

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

:active {
   outline:none !important;
}

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


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

element:active:focus {
    outline: 0;
}

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


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

button:focus {
  text-decoration: none;
  outline:none;
  border: none;
  box-shadow: none;
}

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

button:focus {outline:0 !important;}

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


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


هذا ما نجحني:

button:focus {
    box-shadow:none;
}




google-chrome