Jak usunąć kropkowany kontur Firefoksa na PRZYCISKACH, a także na linkach?

Mogę sprawić, że Firefox nie wyświetla brzydkich kropkowanych konturów ostrości na linkach z tym:

a:focus { 
    outline: none; 
}

Ale jak mogę to zrobić dla <button>tagów? Kiedy to zrobię:

button:focus { 
    outline: none; 
}

przyciski nadal mają przerywany kontur fokusa, kiedy je klikam.

(i tak, wiem, że jest to problem z użytecznością, ale chciałbym podać własne wskazówki dotyczące ostrości, które są odpowiednie dla projektu zamiast brzydkich szarych kropek)

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

Nie ma potrzeby definiowania selektora.

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

Jednak narusza to najlepsze praktyki dostępności z W3C. Zarys ma pomóc osobom poruszającym się na klawiaturze.

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

Jeśli wolisz używać CSS, aby pozbyć się przerywanego 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ższe działało dla mnie w przypadku LINK, pomyślałem o udostępnieniu - na wypadek, gdyby ktoś był zainteresowany.

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

Twoje zdrowie!

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

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

Odpowiedź oznaczona jako poprawna nie działała w przeglądarce Firefox 24.0.

Aby usunąć kropkowany kontur Firefoksa na przyciskach i tagach zakotwiczenia, 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 tutaj większości odpowiedzi, ale żadna z nich nie działała dla mnie. Kiedy zdałem sobie sprawę, że muszę też pozbyć się niebieskiego obrysu przycisków na Chrome, znalazłem inne rozwiązanie. Usuń niebieską ramkę z przycisku niestandardowego stylu css w Chrome

Ten kod działał dla mnie w przeglądarce Firefox w wersji 30 na Windows 7. Być może może pomóc komuś innemu :)

button:focus {outline:0 !important;}

Nie ma sposobu, aby usunąć te kropkowane fokus w przeglądarce Firefox za pomocą CSS.

Jeśli masz dostęp do komputerów, na których działa twoja aplikacja internetowa, przejdź do about: config w Firefox i ustaw browser.display.focus_ring_width na 0. Wtedy Firefox w ogóle nie będzie pokazywał żadnych kropkowanych ramek.

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

W sieci istnieje wiele rozwiązań tego, z których wiele działa, ale aby to wymusić, aby absolutnie nic nie mogło wyróżnić / skoncentrować się po użyciu następujących elementów:

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

To tylko dodaje trochę dodatkowego bezpieczeństwa i przypieczętowuje ofertę!

Zapewni to kontrolę zasięgu:

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

Od: Usuń przerywany kontur z elementu wejściowego zakresu w Firefoksie

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

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

Przed (białe kropki są widoczne)

Po (białe kropki są niewidoczne)

Jeśli chcesz zastosować tylko kilka pól wprowadzania, przycisków itp. Użyj bardziej szczegółowego kodu.

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

Happy Coding !!

Po prostu dodaj ten css dla pola wyboru

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

To działa dobrze dla mnie.

Myślę, że powinieneś naprawdę wiedzieć, co robisz, usuwając kontur fokusa, ponieważ może to zepsuć nawigację za pomocą klawiatury i dostępność.

Jeśli musisz go wyjąć z powodu problemu z projektem, dodaj :focus stan przycisku, który zastępuje go innym wizualnym sygnałem, takim jak zmiana obramowania na jaśniejszy kolor lub coś w tym rodzaju.

Czasami czuję potrzebę wyciągnięcia tego irytującego zarysu, ale zawsze przygotowuję alternatywną wizualną wskazówkę.

I nigdy nie używaj blur()funkcji js. Użyj ::-moz-focus-innerpseudoklasy.

W większości przypadków bez dodania !importantdo kodu CSS 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 dowolny inny kod:

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

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

Gdzie buttonmoże być dowolny selektor CSS, dla którego chcesz wyłączyć zachowanie.

Możesz zintensyfikować skupienie zamiast się go pozbyć.

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

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

Usuń przerywany kontur z łączy, 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 ramkę na przycisku i chcesz ukryć kropkowany kontur w Firefoksie bez usuwania ramki (a zatem 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 na osiągnięcie tego jest ustawienie

browser.display.focus_ring_width = 0

w about: config na podstawie przeglądarki.

Działa to w Firefoksie v-27.0

 .buttonClassName:focus {
  outline:none;
}

Po wypróbowaniu wielu powyższych opcji tylko dla mnie działały.

*: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 to, co robi bootstrap dla przycisków fokusu / aktywnych:

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

UWAGA: niestandardowy plik css powinien znajdować się po pliku css Bootstrap w kodzie HTML, aby go zastąpić.

Tak, 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.