it-swarm-eu.dev

Jak odstranit tečkovaný obrys Firefoxu na BUTTONS i odkazy?

Mohu přimět Firefox, aby nezobrazoval ošklivé tečkované obrysy zaměření odkazy s tím:

a:focus { 
    outline: none; 
}

Ale jak to mohu udělat také pro značky <button>? Když to udělám:

button:focus { 
    outline: none; 
}

i když na ně tlačítka kliknu, budou mít stále tečkovaný obrys zaostření.

(a ano, vím, že se jedná o problém s použitelností, ale rád bych poskytl své vlastní fokusační tipy, které jsou vhodné pro design místo ošklivých šedých teček)

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

Není třeba definovat selektor.

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

To však porušuje osvědčené postupy pro usnadnění přístupu z W3C. Obrys je zde, aby pomohl těm, kteří se pohybují pomocí kláves.

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

280

Pokud dáváte přednost použití CSS, abyste se zbavili tečkovaného obrysu:

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

Níže pracoval pro mě v případě ODKAZY, myšlenka na sdílení - v případě, že někdo má zájem.

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

Na zdraví!

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

[Aktualizace] Toto řešení již nefunguje. Řešení, které pro mě fungovalo, je toto https://stackoverflow.com/a/3844452/92556

Odpověď označená jako správná nefungovala s Firefoxem 24.0.

Abychom odstranili tečkovaný obrys Firefoxu na tlačítkách a kotevních značkách, přidal jsem níže uvedený kód:

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

Řešení jsem našel zde: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html

9
Renato Carvalho

Vyzkoušel většinu odpovědí zde, ale žádná z nich pro mě nepracovala. Když jsem si uvědomil, že se musím zbavit modrého obrysu na tlačítkách i na [Chrome] _, našel jsem další řešení. Odstranit modré ohraničení z tlačítka css v uživatelském stylu v Chrom

Tento kód pro mě pracoval na Firefoxu verze 30 ve Windows 7. Možná by to mohlo pomoci někomu jinému :)

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

Na webu je k dispozici mnoho řešení, z nichž mnohá fungují, ale nutit to, aby absolutně nic nemohlo zvýraznit/zaostřit, jakmile použijete následující:

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

To jen dodává, že trochu extra bezpečnosti a uzavře dohodu!

5
Shannon Hochkins

Neexistuje způsob, jak odstranit toto tečkované zaměření v prohlížeči Firefox pomocí CSS.

Pokud máte přístup k počítačům, ve kterých vaše webová aplikace funguje, přejděte na: config ve Firefoxu a nastavte browser.display.focus_ring_width na 0. Firefox tedy nebude zobrazovat žádné tečkované okraje.

Následující chyba vysvětluje téma: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

5

Jednoduše přidejte tento css pro vybrané pole

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

Funguje to dobře.

4
Abhay Singh

Testováno na Firefox 46 a Chrome 49 pomocí tohoto kódu.

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

Před (jsou vidět bílé tečky)

input with white dots

Po (Bílé tečky jsou neviditelné) enter image description here

Pokud chcete použít pouze na několik vstupních polí, tlačítek atd. Použijte konkrétnější kód.

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

Happy Coding !!

4
Madan Sapkota

Ve většině případů bez přidání !important do CSS kódu to nebude fungovat.

Nezapomeňte tedy přidat !important

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


Nebo jakýkoli jiný kód:

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

Možná se budete chtít soustředit spíše na to, než se toho zbavit.

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

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

Pokud máte na tlačítku ohraničení a chcete skrýt tečkovaný obrys ve Firefoxu bez odebrání ohraničení (a proto je na tlačítku extra šířka), můžete použít:

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

Vypadá to, že jediným způsobem, jak toho dosáhnout, je nastavení

browser.display.focus_ring_width = 0

in about: config on per based browser.

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

Kde button může být jakýkoli selektor CSS, pro který chcete chování zakázat.

2
wavded

Myslím, že byste měli opravdu vědět, co děláte, tím, že odstraníte obrys zaostření, protože to může zmatek pro navigaci pomocí klávesnice a přístupnost.

Pokud ji potřebujete z důvodu problému s designem odstranit, přidejte do tlačítka stav :focus, který jej nahradí jiným vizuálním podnětem, například změnou ohraničení na jasnější barvu nebo podobně.

Někdy mám pocit, že je třeba, aby obtěžující obrys, ale vždy připravím alternativní zaměření vizuální narážka.

A nikdy použijte funkci blur() js. Použijte pseudo třídu ::-moz-focus-inner.

2
Flatline

Následující kód CSS funguje na odstranění tohoto problému:

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

Odstraňte tečkovaný obrys z odkazů, tlačítka a vstupního prvku.

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

Tím získáte kontrolu rozsahu:

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

Od: Odstranit tečkovaný obrys ze vstupního prvku rozsahu ve Firefox

2
bob

Jo, nenechte si ujít ! Důležité

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

Po vyzkoušení mnoha možností z výše uvedeného pro mě pracoval pouze následující.

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

Vyzkoušejte button::-moz-focus-inner {border: 0px solid transparent;} v CSS.

0
usual

Toto funguje na firefox v-27.0

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

Spolu s Bootstrap 3 jsem použil tento kód. Druhá sada pravidel právě zruší , co bootstrap dělá pro tlačítka 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;
}

Všimněte si, že váš vlastní soubor css by měl přijít za soubor Bootstrap css v html kódu, aby jej přepsal.

0
Ehsan88