كيفية إزالة فايرفوكس المنقطة مخطط على أزرار وكذلك الروابط ؟

Question

أنا يمكن أن تجعل فايرفوكس لا يتم عرض القبيح المنقطة التركيز على الخطوط العريضة الروابط مع هذا:

a:focus { 
    outline: none; 
}

ولكن كيف يمكن أن أفعل هذا <button> العلامات أيضا ؟ عندما أفعل هذا:

button:focus { 
    outline: none; 
}

الأزرار لا تزال لديها المنقطة التركيز العريضة عند النقر عليها.

(نعم, أعلم هذا هو مشكلة الاستخدام ، ولكن أود أن أقدم بلدي التركيز التلميحات التي تتلاءم مع التصميم بدلا من القبيح النقاط الرمادية)

Answer 1

button::-moz-focus-inner {
  border: 0;
}

Answer 2

لا تحتاج إلى تعريف محدد.

:focus {outline:none;}
::-moz-focus-inner {border:0;}

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

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples

Answer 3

إذا كنت تفضل استخدام CSS للتخلص من الخطوط المنقطة:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Answer 4

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

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

هتاف!

Answer 5

:focus, :active {
    outline: 0;
    border: 0;
}

Answer 6

[تحديث] هذا الحل لا يعمل بعد الآن.الحل التي عملت بالنسبة لي هو هذا https://stackoverflow.com/a/3844452/925560

الجواب وضع علامة الصحيح لا تعمل مع فيرفكس 24.0.

لإزالة فايرفوكس المنقطة مخطط على أزرار مرساة الكلمات أضفت الكود أدناه:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

لقد وجدت الحل هنا: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Answer 7

حاولت أكثر من الإجابات هنا ، ولكن أيا منها لا يعمل بالنسبة لي.عندما أدركت أن لدي للتخلص من المخطط الأزرق على أزرار على الكروم أيضا ، وجدت حل آخر. إزالة الحدود الأزرق من css العرف على غرار زر في كروم

هذا الكود عمل معي على نسخة فايرفوكس 30 على ويندوز 7.ربما قد يساعدك شخص آخر هناك :)

button:focus {outline:0 !important;}

Answer 8

لا توجد طريقة لإزالة هذه المنقطة التركيز في فايرفوكس باستخدام CSS.

إذا كان لديك حق الوصول إلى أجهزة الكمبيوتر الخاص بك حيث webapplication يعمل اذهب إلى about:config في فايرفوكس مجموعة browser.display.focus_ring_width 0.ثم فايرفوكس لن تظهر أي المنقطة الحدود في كل شيء.

الأخطاء التالية توضح الموضوع: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Answer 9

هناك العديد من الحلول الموجودة على الإنترنت عن هذا الكثير من العمل, ولكن قوة هذا, حتى أن لا شيء على الإطلاق يمكن تسليط الضوء/التركيز مرة واحدة في استخدام ما يلي:

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

هذا فقط يضيف قليلا اضافية الأمن & الأختام الصفقة!

Answer 10

اختبار على فايرفوكس 46 كروم 49 باستخدام هذا الرمز.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

قبل (النقاط البيضاء مرئية )

بعد ( النقاط البيضاء هي غير مرئية )

إذا كنت تريد أن تنطبق إلا على عدد قليل من حقول الإدخال ، أزرار الخ.استخدام أكثر من رمز معين.

input[type=text] {
  outline: none !important;
}

سعيد الترميز!!

Answer 11

في معظم الحالات دون إضافة !important إلى رمز CSS, فهو لن يعمل.

لذا لا تنس أن تضيف !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}

أو أي رمز آخر:

button::-moz-focus-inner {
  border: 0 !important;
}

Answer 12

ببساطة إضافة هذا css لتحديد مربع

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

هذا يعمل بشكل جيد بالنسبة لي.

Answer 13

يبدو أن الطريقة الوحيدة لتحقيق ذلك هي من خلال وضع

browser.display.focus_ring_width = 0

في about:config في المتصفح أساس.

Answer 14

button::-moz-focus-inner { border: 0; }

حيث button يمكن أن يكون أيا كان محدد CSS التي تريد تعطيل السلوك.

Answer 15

قد تحتاج إلى تكثيف التركيز بدلا من التخلص منه.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

Answer 16

أعتقد أن عليك أن تعرف حقا ما تفعلونه من خلال إزالة التركيز مخطط, لأنه يمكن أن تخطئ الملاحة لوحة المفاتيح وسهولة الوصول إليها.

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

أحيانا أشعر بالحاجة إلى اتخاذ هذا مزعج مخطط لكني دائما إعداد بديل التركيز جديلة البصرية.

و أبدا استخدام blur() شبيبة وظيفة.استخدام ::-moz-focus-inner الزائفة الدرجة.

Answer 17

إزالة الخطوط المنقطة من الروابط زر عنصر المدخلات.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 18

إذا كان لديك الحدود على زر ترغب في إخفاء الخطوط المنقطة في فايرفوكس دون إزالة الحدود (وبالتالي هو عرض إضافية على زر) يمكنك استخدام:

.button::-moz-focus-inner {
    border-color: transparent;
}

Answer 19

كود CSS أدناه يعمل على إزالة هذا:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

Answer 20

هذا سوف تحصل على مجموعة التحكم:

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

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

Answer 21

يمكنك محاولة button::-moz-focus-inner {border: 0px solid transparent;} في CSS الخاص بك.

Answer 22

هذا يعمل على فايرفوكس v-27.0

 .buttonClassName:focus {
  outline:none;
}

Answer 23

بعد محاولة العديد من الخيارات من فوق التالية فقط عملت بالنسبة لي.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

Answer 24

جنبا إلى جنب مع التمهيد 3 أنا استخدم هذا الرمز.المجموعة الثانية من القواعد فقط التراجع ماذا التمهيد يفعل التركيز/نشط الأزرار:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

علما بأن مخصص css الملف يجب أن تأتي بعد التمهيد css الملف في الكود الخاص بك إلى تجاوز ذلك.

Answer 25

نعم لا تفوت !المهم

button::-moz-focus-inner {
 border: 0 !important;
}