CSS كيفية التخلص من الحدود التي تظهر حول الزر المخصص عند النقر عليه وبعده

StackOverflow https://stackoverflow.com//questions/22083833

  •  24-12-2019
  •  | 
  •  

سؤال

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

لا يظهر هذا في Safari على OS-X ولكنه يظهر مع Chrome.مع FireFox يبلغ سمك الحد 1 بكسل ويظهر مربعًا داخل المربع المخصص الخاص بي.(لن يتم تشغيله على IE لأننا عالقون مع IE8 لفترة من الوقت.) إنه أمر مزعج.

لغة البرمجة: 

<button class='command-btn' type='button' id='find-camera-btn'>Find Camera</button>

CSS3:

.command-btn {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 16px;
   color: blue;
   width: 130px;
   height: 40px;
   float: left;
   margin: 6px 0px 5px 10px;
   background: -moz-linear-gradient(top, #0aa31b 0%, #d7de16 99%, #ebeb0e);
   background: -webkit-gradient(linear, left top, left bottom, from(#0aa31b),
     color-stop(0.99, #d7de16), to(#ebeb0e));
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
   border-radius: 14px;
   border: 1px solid #6d8000;
   -moz-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px
     rgba(255, 255, 255, 1);
   -webkit-box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px
      2px rgba(255, 255, 255, 1);
   box-shadow: 0px 1px 3px rgba(000, 000, 000, 0.5), inset 0px 0px 2px
     rgba(255, 255, 255, 1);
   text-shadow: 0px -1px 0px rgba(000, 000, 000, 0.2), 0px 1px 0px
     rgba(255, 255, 255, 0.4);
}

أنا أستخدم Dart ولكن لا يهم الكود الموجود في طريقة "OnClick".إذا كان بإمكاني نقل التركيز بعد النقرة فإن ذلك من شأنه أن يحل المشكلة ولكني لا أعرف كيفية القيام بذلك.

هل كانت مفيدة؟

المحلول

أضف القاعدة:

giveacodicetagpre. يجب أن تفعل

العمل

نصائح أخرى

giveacodicetagpre.

هل جربت outline: none?

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top