Firefox'un BUTTONS üzerindeki noktalı anahatlarını ve bağlantılarını nasıl kaldırırım?

Firefox'un bağlantılarda çirkin noktalı odak anahatlarını görüntülememesini sağlayabilirim bu :

a:focus { 
    outline: none; 
}

Ancak bunu <button>etiketler için de nasıl yapabilirim ? Bunu yaptığımda:

button:focus { 
    outline: none; 
}

düğmeler, üzerlerine tıkladığımda hala noktalı odak anahatlarına sahip.

(ve evet, bunun bir kullanılabilirlik sorunu olduğunu biliyorum, ancak çirkin gri noktalar yerine tasarıma uygun olan kendi odak ipuçlarını vermek istiyorum)

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

Bir seçici tanımlamaya gerek yoktur.

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

Ancak, bu W3C'nin erişilebilirlikle ilgili en iyi uygulamalarını ihlal eder. Anahat, klavyelerle gezinmeye yardımcı olmak için var.

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

Noktalı çerçeveden kurtulmak için CSS kullanmayı tercih ederseniz:

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

Aşağıdakiler benim için çalıştı, LINKS, paylaşmayı düşündü - birinin ilgilenmesi durumunda.

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

Şerefe!

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

[Güncelleme] Bu çözüm artık çalışmıyor. Benim için işe yarayan çözüm budur https://stackoverflow.com/a/3844452/925560

Doğru olarak işaretlenen cevap Firefox 24.0 ile çalışmadı.

Düğmelerdeki ve bağlantı etiketlerindeki Firefox'un noktalı anahattını kaldırmak için aşağıdaki kodu ekledim:

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

Çözümü burada buldum: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Cevapların çoğunu burada denedim, ama hiçbiri benim için çalışmadı. Chrome'daki düğmelerdeki mavi çerçeveden de kurtulmam gerektiğini fark ettiğimde, başka bir çözüm buldum. Chrome'daki css özel stil düğmesinden mavi kenarlığı kaldırın

Bu kod benim için Windows 7'deki Firefox sürüm 30'da çalıştı. Belki de başka birine yardımcı olabilir :)

button:focus {outline:0 !important;}

Firefox'ta bu noktalı odağı CSS kullanarak kaldırmanın bir yolu yoktur.

Web uygulamanızın çalıştığı bilgisayarlara erişiminiz varsa, Firefox'ta about: config bölümüne gidin ve browser.display.focus_ring_width 0 olarak . Firefox noktalı kenarlık göstermeyecektir.

Aşağıdaki hata konuyu açıklıyor: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Bunun için web'de bulunan, birçoğu işe yarayan, ancak bunu zorlamak için birçok çözüm var, böylece aşağıdakileri kullandıktan sonra kesinlikle hiçbir şey vurgulanamaz / odaklanamaz:

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

Bu sadece biraz ekstra güvenlik ekler ve anlaşma mühürler!

Bu, menzil kontrolünü elde edecektir:

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

Kimden: Firefox'ta aralık giriş öğesinden noktalı anahattı kaldır

Bu kodu kullanarak Firefox 46 ve Chrome 49'da test edilmiştir.

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

Önce (beyaz noktalar görünür)

Sonra (Beyaz noktalar görünmez)

Yalnızca birkaç giriş alanına, düğmeye vb. Uygulamak istiyorsanız Daha spesifik kodu kullanın.

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

Mutlu Kodlama !!

Seçim kutusu için bu css'yi eklemeniz yeterlidir

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

Bu benim için iyi çalışıyor.

Odak anahattını kaldırarak ne yaptığınızı gerçekten bilmeniz gerektiğini düşünüyorum, çünkü klavye gezinmesi ve erişilebilirliği için karışıklık yaratabilir.

Bir tasarım sorunu nedeniyle çıkarmanız gerekiyorsa, :focus , düğmenin yerine, kenarlığı daha parlak bir renge veya bunun gibi bir şeye değiştirmek gibi başka bir görsel işaretle değiştiren durum .

Bazen bu sinir bozucu taslağı çıkarmam gerektiğini hissediyorum, ancak her zaman alternatif bir odak görsel işareti hazırlarım.

Ve aslablur() js işlevini kullanmayın . ::-moz-focus-innerSözde sınıfı kullanın .

Çoğu durumda !importantCSS koduna eklenmeden çalışmaz.

Yani, eklemeyi unutma !important

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

Veya başka bir kod:

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

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

buttonDavranışı devre dışı bırakmak istediğiniz herhangi bir CSS seçici nerede olabilir.

Odak noktasından kurtulmak yerine yoğunlaştırmak isteyebilirsiniz.

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

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

Bağlantılardan, düğmeden ve giriş öğesinden noktalı anahatları kaldırın.

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

Eğer bir düğmeye bir sınır var ve Firefox'ta Noktalı gizlemek isterseniz olmadan (ve dolayısıyla o butona ekstra genişlik var) kullanabilirsiniz sınır çıkarmadan:

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

Aşağıdaki CSS kodu bunu kaldırmak için çalışır:

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

Bunu başarmanın tek yolu,

browser.display.focus_ring_width = 0

hakkında: tarayıcı bazında yapılandırma.

Firefox v-27.0'da çalışır

 .buttonClassName:focus {
  outline:none;
}

Yukarıdakilerden birçok seçeneği denedikten sonra sadece aşağıdakiler benim için çalıştı.

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

Bootstrap 3 ile birlikte bu kodu kullandım. İkinci kural kümesi, odak / etkin düğmeler için önyüklemenin ne yaptığını geri alır :

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

Özel css dosyanızın html kodunuzdaki Bootstrap css dosyasından sonra geçersiz kılınması gerektiğini unutmayın.

Evet kaçırmayın ! Önemli

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

button::-moz-focus-inner {border: 0px solid transparent;}CSS'nizde deneyebilirsiniz .