Jak usunąć przerywane kontury Firefoksa na przyciskach i linkach?

Nie ma potrzeby definiowania selektora.

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

Jednak narusza to najlepsze praktyki dostępności z W3C. zarys jest po to, aby pomóc tym, którzy poruszają się za pomocą klawiatur.

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

Jeśli wolisz użyć CSS, aby pozbyć się kropkowanego konturu:

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

Poniżej działa dla mnie w przypadku linków, myślałem o udostępnieniu - w przypadku, gdy ktoś jest zainteresowany.

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

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

[Update] To rozwiązanie już nie działa. Rozwiązanie, które zadziałało dla mnie jest to https://stackoverflow.com/a/3844452/925560

Odpowiedź oznaczona jako poprawna nie działała z Firefoksem 24.0.

Aby usunąć kropkowane kontury Firefoksa na przyciskach i tagach anchor dodałem poniższy kod:

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

Znalazłem rozwiązanie tutaj: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

Próbowałem większości odpowiedzi tutaj, ale żadna z nich nie zadziałała dla mnie. Kiedy zdałem sobie sprawę, że muszę pozbyć się niebieskiego konturu na przyciskach na Chrome też, znalazłem inne rozwiązanie. Usuń niebieską ramkę z przycisku css custom-styled w Chrome

Ten kod zadziałał u mnie na Firefoksie w wersji 30 na Windows 7. Może to pomoże komuś innemu:)

button:focus {outline:0 !important;}

To otrzyma kontrolę zakresu:

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

From: Usuń kropkowany kontur z elementu wejściowego zakresu w Firefoksie

Nie ma sposobu, aby usunąć te kropkowane fokusy w Firefoksie za pomocą CSS.

Jeśli masz dostęp do komputerów, na których działa Twoja aplikacja, Przejdź do about: config w Firefoksie i ustaw browser.display.focus_ring_width Na 0. Wtedy Firefox nie pokaże żadnych przerywanych granic w ogóle.

Następujący błąd wyjaśnia temat: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Istnieje wiele rozwiązań na to, z których wiele działa, ale aby to wymusić, tak że absolutnie nic nie może wyróżnić/skupić się raz użyj następującego:

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

To tylko dodaje, że trochę dodatkowych zabezpieczeń i uszczelnia umowę!

Testowane na Firefoksie 46 i Chrome 49 przy użyciu tego kodu.

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

Przed (widoczne są białe kropki)

Po (białe kropki są niewidoczne )

Jeśli chcesz zastosować tylko kilka pól wejściowych, przycisków itp. Użyj bardziej konkretnego kodu.

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

Po prostu dodaj ten css dla pola wyboru

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

Myślę, że powinieneś naprawdę wiedzieć, co robisz, usuwając kontur ostrości, ponieważ może to zepsuć nawigację na klawiaturze i dostępność.

Jeśli musisz go wyjąć z powodu problemu z projektowaniem, dodaj stan :focus do przycisku, który zastąpi go innym sygnałem wizualnym, np. zmieniając obramowanie na jaśniejszy kolor lub coś w tym stylu.

Czasami czuję potrzebę usunięcia tego irytującego zarysu, ale zawsze przygotowuję alternatywny obraz ostrości / align = "left" /

I Nigdy nie używaj funkcji blur() js. Użyj pseudo klasy ::-moz-focus-inner.

W większości przypadków bez dodawania !important do kodu CSS, to nie zadziała.

Więc nie zapomnij dodać !important

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

Lub inny kod:

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

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

Gdzie button może być dowolnym selektorem CSS, dla którego chcesz wyłączyć zachowanie.

Możesz chcieć zintensyfikować ostrość, zamiast się jej pozbyć.

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

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

Usuń przerywane kontury z linków, przycisku i elementu wejściowego.

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

Jeśli masz obramowanie na przycisku i chcesz ukryć kropkowany kontur w Firefoksie Bez usuwania obramowania (a co za tym idzie dodatkowej szerokości na przycisku), możesz użyć:

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

Poniższy kod CSS działa, aby to usunąć:

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

Wygląda na to, że jedynym sposobem, aby to osiągnąć jest ustawienie

browser.display.focus_ring_width = 0

W about: config na podstawie przeglądarki.

To działa na Firefoksie v-27.0

 .buttonClassName:focus {
  outline:none;
}

Po wypróbowaniu wielu opcji z powyższego tylko następujące zadziałały dla mnie.

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

Wraz z Bootstrap 3 użyłem tego kodu. Drugi zestaw reguł po prostu Cofnij co Bootstrap robi dla przycisków focus/active:

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

Zauważ, że Twój niestandardowy plik css powinien pojawić się po pliku css Bootstrap w kodzie html, aby go zastąpić.

Nie przegap!ważne

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

Możesz spróbować button::-moz-focus-inner {border: 0px solid transparent;} w swoim CSS.