it-swarm-tr.com

DÜĞMELERİ Firefox noktalı dış hatları ve bağlantılar nasıl kaldırılır?

Firefox’un çirkin noktalı odaklanma ana hatlarını görüntülememesini sağlayabilirim. bağlantılar Bununla:

a:focus { 
    outline: none; 
}

Fakat bunu <button> etiketlerinde de nasıl yapabilirim? Bunu yaptığımda:

button:focus { 
    outline: none; 
}

düğmelerin üzerini tıklattığımda düğmeler hala noktalı odak çizgisine sahip.

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

459
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
686
user27656

Bir seçici tanımlamanıza gerek yok.

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

Ancak, bu W3C'den erişilebilirliği en iyi uygulamalarını ihlal ediyor. Anahat, klavyelerde gezinmek için orada yardımcı olmaktır.

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

280

Noktalı anahattan kurtulmak için CSS'yi kullanmayı tercih ediyorsanız:

/*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; 
    }
46
chinkchink

Aşağıda LINKS durumunda benim için çalıştı, paylaşma düşüncesi - birisi ilgileniyorsa.

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

Şerefe!

42
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

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

Doğru olarak işaretlenmiş cevap Firefox 24.0 ile işe yaramadı.

Firefox'un düğmeler üzerindeki noktalı çizgisini ve bağlantı etiketlerini 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

9
Renato Carvalho

Cevapların çoğunu burada denedim, ama hiçbiri benim için işe yaramadı. Chrome'daki düğmelerdeki mavi anahattan da kurtulmam gerektiğini anladığımda başka bir çözüm buldum. Chrome'daki css özel düğmesinden mavi kenarlığı kaldırın

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

button:focus {outline:0 !important;}
7
Vartox

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

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

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

5
Shannon Hochkins

Bu noktalı odağı CSS kullanarak Firefox'ta 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 değerini 0 olarak ayarlayın. O zaman Firefox hiç noktalı çizilmez.

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

5

Seçim kutusu için bu css'i eklemeniz yeterli

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

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

4
Abhay Singh

Bu kodu kullanarak Firefox 46 ve Chrome 49 üzerinde test edilmiştir.

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

Önce (beyaz noktalar görülebilir)

input with white dots

Sonra (Beyaz noktalar görünmez) enter image description here

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

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

Mutlu Kodlama !!

4
Madan Sapkota

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

Yani, !important eklemeyi unutmayın

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

Ondan kurtulmak yerine odağı yoğunlaştırmak isteyebilirsiniz.

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

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

Bir düğmede kenarlık varsa ve noktalı çizgiyi Firefox'ta gizlemek istiyorsanız olmadan kenarlığı kaldırmak (ve dolayısıyla düğmedeki ekstra genişlik) kullanabilirsiniz:

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

Bunu başarmanın tek yolu ayar gibi görünüyor

browser.display.focus_ring_width = 0

yaklaşık: config bazında config.

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

Burada button, davranışını devre dışı bırakmak istediğiniz CSS seçicisinden bağımsız olabilir.

2
wavded

Bence odak çizgisini kaldırarak ne yaptığınızı gerçekten bilmelisiniz, çünkü klavye gezinmesi ve erişilebilirlik için karışıklığa neden olabilir.

Bir tasarım sorunu nedeniyle çıkarmanız gerekirse, kenarlığı daha parlak bir renge dönüştürmek veya bunun gibi başka bir görsel ipucu ile değiştiren düğmeye bir :focus durumu ekleyin.

Bazen sinir bozucu bir taslak çıkarmaya ihtiyacım olduğunu hissediyorum, ancak her zaman alternatif bir odak görsel ipucu hazırlıyorum.

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

2
Flatline

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

Noktalı anahatları linklerden, butonlardan ve girdi elemanlarından çıkarı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;
}
2
Fizer Khan

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şi öğesindeki noktalı çizgiyi kaldırın

2
bob

Evet, kaçırmayın ! Önemli

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

Yukarıdaki 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;}
0
Waqas Bukhary

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

0
usual

Bu firefox v-27.0 üzerinde çalışıyor

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

Bootstrap 3 ile birlikte bu kodu kullandım. İkinci kural kümesi sadece Odaklanma/etkin düğmeler için önyükleme işlevinin ne yaptığını geri al:

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, geçersiz kılmak için html kodunuzdaki Bootstrap css dosyasından sonra gelmesi gerektiğine dikkat edin.

0
Ehsan88