Come rimuovere il contorno tratteggiato di Firefox sui PULSANTI e sui collegamenti?
https://stackoverflow.com/questions/71074
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Posso fare in modo che Firefox non visualizzi i brutti contorni di messa a fuoco tratteggiati collegamenti con questo:
a:focus {
outline: none;
}
Ma come posso farlo? <button> anche i tag?Quando faccio questo:
button:focus {
outline: none;
}
i pulsanti hanno ancora il contorno tratteggiato quando faccio clic su di essi.
(e sì, so che si tratta di un problema di usabilità, ma vorrei fornire i miei suggerimenti di messa a fuoco che siano appropriati per il design invece di brutti punti grigi)
Soluzione
button::-moz-focus-inner {
border: 0;
}
Altri suggerimenti
Non è necessario definire un selettore.
:focus {outline:none;}
::-moz-focus-inner {border:0;}
Tuttavia, ciò viola le migliori pratiche di accessibilità del W3C.Lo schema è lì per aiutare chi naviga con le tastiere.
Se preferisci utilizzare i CSS per eliminare il contorno tratteggiato:
/*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;
}
Quanto segue ha funzionato per me in caso di LINK, ho pensato alla condivisione, nel caso qualcuno fosse interessato.
a, a:visited, a:focus, a:active, a:hover{
outline:0 none !important;
}
Saluti!
:focus, :active {
outline: 0;
border: 0;
}
[Aggiornamento] Questa soluzione non funziona più.La soluzione che ha funzionato per me è questa https://stackoverflow.com/a/3844452/925560
La risposta contrassegnata come corretta non funzionava con Firefox 24.0.
Per rimuovere il contorno tratteggiato di Firefox su pulsanti e tag di ancoraggio ho aggiunto il codice seguente:
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;
}
Ho trovato la soluzione qui: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html
Ho provato la maggior parte delle risposte qui, ma nessuna ha funzionato per me.Quando ho capito che dovevo eliminare il contorno blu anche sui pulsanti di Chrome, ho trovato un'altra soluzione. Rimuovi il bordo blu dal pulsante con stile personalizzato CSS in Chrome
Questo codice ha funzionato per me su Firefox versione 30 su Windows 7.Forse potrebbe aiutare qualcun altro là fuori :)
button:focus {outline:0 !important;}
Non c'è modo di rimuovere questi focus tratteggiati in Firefox utilizzando CSS.
Se hai accesso ai computer su cui funziona la tua applicazione web, vai su about:config in Firefox e imposta browser.display.focus_ring_width a 0.Quindi Firefox non mostrerà alcun bordo tratteggiato.
Il seguente bug spiega l'argomento: https://bugzilla.mozilla.org/show_bug.cgi?id=74225
Sul Web sono disponibili molte soluzioni a questo scopo, molte delle quali funzionano, ma per forzarlo, in modo che assolutamente nulla possa evidenziare/mettere a fuoco una volta utilizzato, utilizzare quanto segue:
::-moz-focus-inner, :active, :focus {
outline:none;
border:0;
-moz-outline-style: none;
}
Questo aggiunge solo quel po' di sicurezza in più e suggella l'affare!
Testato su Firefox 46 e Chrome 49 utilizzando questo codice.
input:focus, textarea:focus, button:focus {
outline: none !important;
}
Prima (i punti bianchi sono visibili)
Dopo (I punti bianchi sono invisibili)
Se desideri applicare solo su alcuni campi di input, pulsanti, ecc.Utilizza il codice più specifico.
input[type=text] {
outline: none !important;
}
Buona codifica!!
Nella maggior parte dei casi senza aggiungere il !important al codice CSS, non funzionerà.
Quindi, non dimenticare di aggiungere !important
a, a:active, a:focus{
outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}
O qualsiasi altro codice:
button::-moz-focus-inner {
border: 0 !important;
}
Aggiungi semplicemente questo CSS per la casella di selezione
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
Questo funziona bene per me.
Sembra che l'unico modo per raggiungere questo obiettivo sia l'impostazione
browser.display.focus_ring_width = 0
in about:config in base al browser.
button::-moz-focus-inner { border: 0; }
Dove button può essere qualunque selettore CSS per il quale desideri disabilitare il comportamento.
Potresti voler intensificare la concentrazione piuttosto che sbarazzartene.
button::-moz-focus-inner {border: 2px solid transparent;}
button:focus::-moz-focus-inner {border-color: blue}
Penso che dovresti davvero sapere cosa stai facendo rimuovendo il contorno dello stato attivo, perché può rovinare la navigazione e l'accessibilità della tastiera.
Se devi rimuoverlo a causa di un problema di progettazione, aggiungi a :focus stato al pulsante che lo sostituisce con qualche altro segnale visivo, ad esempio, cambiando il bordo in un colore più luminoso o qualcosa del genere.
A volte sento il bisogno di eliminare quel contorno fastidioso, ma preparo sempre un segnale visivo di messa a fuoco alternativo.
E Mai Usa il blur() js.Usa il ::-moz-focus-inner pseudoclasse.
Rimuovi il contorno tratteggiato da collegamenti, pulsanti ed elementi di input.
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;
}
Se hai un bordo su un pulsante e desideri nascondere il contorno tratteggiato in Firefox senza rimuovendo il bordo (e quindi la larghezza extra sul pulsante) puoi usare:
.button::-moz-focus-inner {
border-color: transparent;
}
Il codice CSS seguente funziona per rimuoverlo:
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;
}
Questo otterrà il controllo dell'intervallo:
:focus {
outline:none;
}
::-moz-focus-inner {
border:0;
}
input[type=range]::-moz-focus-outer {
border: 0;
}
Da: Rimuovi il contorno tratteggiato dall'elemento di input dell'intervallo in Firefox
Puoi provare button::-moz-focus-inner {border: 0px solid transparent;} nel tuo CSS.
Funziona su Firefox v-27.0
.buttonClassName:focus {
outline:none;
}
Dopo aver provato molte opzioni tra quelle precedenti, solo le seguenti hanno funzionato per me.
*:focus, *:visited, *:active, *:hover { outline:0 !important;}
*::-moz-focus-inner {border:0;}
Insieme a Bootstrap 3 ho usato questo codice.La seconda serie di regole è giusta disfare cosa fa il bootstrap per i pulsanti focus/attivi:
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;
}
NOTA che il tuo file css personalizzato dovrebbe venire dopo il file css Bootstrap nel tuo codice html per sovrascriverlo.
Sì, da non perdere !importante
button::-moz-focus-inner {
border: 0 !important;
}
