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

507

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)

Edward Tanguay
źródło
2
Wygląda na to, że w Firefoksie 4 elementy nie są już domyślnie obrysowane po kliknięciu, ale tylko w przypadku skupienia się na klawiaturze.
Geert,
1
To, co nazywasz „brzydkim”, ma na celu ułatwienie dostępu do strony internetowej. Użytkownicy korzystający tylko z klawiatury nie mogą już określać, która część witryny jest ostra podczas usuwania tego konturu. Twoja strona byłaby całkowicie niedostępna i nigdy nie powinno tak być. Nigdy nie usuwaj konturu. Lepiej stylizuj na swój sposób.
Markus Graf

Odpowiedzi:

787
button::-moz-focus-inner {
  border: 0;
}
Josh Crozier
źródło
15
Tak, to też działa dla mnie! Jak można to zrobić dla wybranych?
7wp
16
Zauważ, że działa to również w przypadku danych wejściowych (np. Input :: - moz-focus-inner {border: 0;})
El Yobo
14
Cel podwójnego dwukropka: (notacja CSS3) evotech.net/blog/2007/05/…
sholsinger
21
Ten nie działał dla mnie, ponieważ bootstrap.css robił te brzydkie kropkowane przyciski. Zamiast tego umieściłem:focus {outline:none !important;}
machineaddict
5
: focus {zarys: brak;} :: - moz-focus-inner {border: 0;} byłoby mniej szczegółowe
Ben
310

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

Anderson Custódio
źródło
8
Dzięki, działało to dla mnie, gdy poprawna odpowiedź nie. Musiałem używać niewłaściwego selektora.
irl_irl,
Dzięki za to, czy to usunie także linki i przyciski?
Nathan
3
Ten jest najlepszy! Odpowiedź akceptowana jest tylko na <button>nie <a>, ani<input>
Ron van der Heijden
2
Idealny w Mozilla Firefox 30 pod Ubuntu (GNU / Linux).
e-info128
4
Poproszę notatkę o tej łamiącej dostępności. Ważne jest, aby pamiętać, że nie każdy może używać myszy, dobrze widzieć lub widzieć. To powiedziawszy, zgodnie z linkiem (i zdrowym rozsądkiem) ukrywanie konturu psuje się tylko po jego zakończeniu without ... an author-supplied visual focus indicator- innymi słowy, dobrze jest zastąpić styl użytkownika użytkownika własnym, jak wspomniano OP. Idealnie powinien być wysoki kontrast.
Jan
48

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; 
    }
chinkchink
źródło
Nie potrzebujesz jednostki na liczbach zero. 0pxmożna zastąpić po prostu0
slang
44

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!

foxybagga
źródło
12
Po prostu a { outline: none; }powinno wystarczyć dla linków.
przyznają
3
tutaj ważna była sztuczka, inne rozwiązania tego nie miały i nie działały. dla mnie.
Cristiano Fontes,
Ale często powinieneś używać a { outline: none; }z !important->a { outline: none !important; }
joryl
24
:focus, :active {
    outline: 0;
    border: 0;
}
blizzyx
źródło
Działa jak urok dla wybranego pola opcji, którego
używałem
1
Nie było to wystarczająco szczegółowe i nie chciałem używać ważnych ani celowanych aelementów, więc znalazłem dobrą opcję body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }
Ivan Durst
10

[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

Renato Carvalho
źródło
2
To już nie działa: / Rozwiązaniem, które zadziałało, jest ten jeden stackoverflow.com/a/3844452/925560
Renato Carvalho
8

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;}
Vartox
źródło
To samo tutaj, jest to jedyne rozwiązanie działające na FF 38.0.5
OlivierH
6

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

Witalij Sharovatov
źródło
Dzięki, że działa dobrze, ale wcześniej utworzyłem tak wiele linków, że do tej pory nie mam tego problemu. ale teraz jestem zdezorientowany, więc jaki jest powód wcześniejszego przedstawienia?
Durga Rao,
Ta odpowiedź jest teraz całkowicie fałszywa. Ustawienie ::-moz-focus-inner {border:0;}jak wspomniano w kilku innych odpowiedziach działa idealnie.
Andy Mercer
@AndyM Ta odpowiedź działa. Rozwiązanie przedstawione w innych odpowiedziach dotyczy CSS i działa tylko w przypadku poszczególnych witryn.
Rahil Wazir
7
Pytanie dotyczy tego, jak można to zrobić za pomocą CSS, a odpowiedź mówi, że tak nie jest. To nieprawda. To może być.
Andy Mercer
6

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ę!

Shannon Hochkins
źródło
6

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

kok
źródło
Żadne inne rozwiązania nie działają range- dziękuję :)
Kamil Kiełczewski
Idealnie, działa również w Firefoksie 72 na Linuksie!
asdjfiasd
5

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)

wprowadź białe kropki

Po (białe kropki są niewidoczne) wprowadź opis zdjęcia tutaj

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 !!

Madan Sapkota
źródło
Byłem !importantpotrzebny, aby zastąpić arkusz stylów Firefoksa. Twoje zdrowie!
SamHH,
5

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.

Abhay Singh
źródło
4

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.

Flatline
źródło
4

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;
}
herci
źródło
3
button::-moz-focus-inner { border: 0; }

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

pomachał
źródło
3

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

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

button:focus::-moz-focus-inner {border-color: blue} 
Jason Plank
źródło
2
@Nathan jest trochę spóźniony, ale brak stylu skupi się na działaniu klawiatury. po naciśnięciu klawisza Tab nie będziesz wiedzieć, na czym się skupia .
Hkan,
@Hkan Tak, zgadzam się. Ale kontur Firefoksa jest brzydki, zwłaszcza gdy jest wokół niestandardowej ramki ostrości.
Nathan
@Nathan Całkowicie się z tym zgadzam. To, co powinniśmy zrobić, to zapewnić własną stylizację dla stanu skupienia, zamiast tworzyć takie same elementy w tym stanie.
Hkan
3

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;
}
Fizer Khan
źródło
3

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;
}
Dave Everitt
źródło
3

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;
}
kurumkan
źródło
2

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.

AlexWilson
źródło
1

Działa to w Firefoksie v-27.0

 .buttonClassName:focus {
  outline:none;
}
star18bit
źródło
1

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;}
Waqas Bukhary
źródło
Właściwie (przynajmniej w Firefoksie 77) potrzebujesz tylko: button:focus { outline: none !important } Lub jeśli mnie nie lubisz! Ważne, działa to również w celu zastąpienia stylu Firefoksa: :root button:focus { outline: none }
Jonas Sandstedt
1

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ć.

Ehsan88
źródło
1

Tak, nie przegap ! Ważne

button::-moz-focus-inner {
 border: 0 !important;
}
Riwaj Chalise
źródło
! ważne nie jest tutaj odpowiedzią, a jeśli Twoja aplikacja tego potrzebuje, masz większe problemy do rozwiązania niż podświetlenia wokół przycisków. Zawsze staraj się unikać! Ważne.
monokrome
0

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

zwykły
źródło