Come rimuovere la struttura punteggiata di Firefox sui pulsanti e i collegamenti?

Posso fare in modo che Firefox non mostri i brutti contorni di messa a fuoco tratteggiata sui collegamenti con questo:

a:focus { 
    outline: none; 
}

Ma come posso fare questo anche per i <button>tag? Quando faccio questo:

button:focus { 
    outline: none; 
}

i pulsanti hanno ancora il contorno del fuoco tratteggiato quando faccio clic su di essi.

(e sì, so che questo è un problema di usabilità, ma vorrei fornire i miei suggerimenti per la messa a fuoco che sono appropriati per il design invece di brutti punti grigi)

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

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.

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

Se si preferisce utilizzare i CSS per sbarazzarsi del contorno punteggiato:

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

Quanto sotto ha funzionato per me in caso di LINK, pensato di condividere - 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 ha funzionato con Firefox 24.0.

Per rimuovere la struttura punteggiata di Firefox sui pulsanti e sui 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 sbarazzarmi anche del contorno blu sui pulsanti di Chrome, ho trovato un'altra soluzione. Rimuovi il bordo blu dal pulsante css in stile personalizzato 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 è possibile rimuovere questo focus punteggiato in Firefox utilizzando CSS.

Se hai accesso ai computer su cui funziona la tua applicazione web, vai su about: config in Firefox e impostato browser.display.focus_ring_widthsu 0. Quindi Firefox non mostrerà alcun bordo punteggiato.

Il seguente bug spiega l'argomento: https://bugzilla.mozilla.org/show_bug.cgi?id=74225

Ci sono molte soluzioni trovate sul web per questo, molte delle quali funzionano, ma per forzare questo, in modo che assolutamente nulla possa evidenziare / focalizzare una volta un uso quanto segue:

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

Questo aggiunge solo un po 'di sicurezza in più e sigilla l'affare!

Questo otterrà il controllo della portata:

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

Da: rimuove il contorno punteggiato dall'elemento di input intervallo in Firefox

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 si desidera applicare solo su pochi campi di input, pulsanti ecc. Utilizzare il codice più specifico.

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

Buona programmazione !!

Aggiungi semplicemente questo css per selezionare la casella

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

Questo funziona bene per me.

Penso che dovresti davvero sapere cosa stai facendo rimuovendo il contorno del focus, perché può rovinarlo per la navigazione della tastiera e l'accessibilità.

Se è necessario eliminarlo a causa di un problema di progettazione, aggiungere uno :focusstato al pulsante che lo sostituisce con qualche altro segnale visivo, come cambiare il bordo in un colore più luminoso o qualcosa del genere.

A volte sento il bisogno di togliere quel fastidioso contorno, ma preparo sempre un segnale visivo di messa a fuoco alternativa.

E non usare mai la blur()funzione js. Usa la ::-moz-focus-innerpseudo classe.

Nella maggior parte dei casi senza aggiungere il !important 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;
}

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

Dove buttonpuò essere qualunque selettore CSS per cui si desidera disabilitare il comportamento.

Potresti voler intensificare la messa a fuoco piuttosto che liberartene.

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

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

Rimuovi il contorno punteggiato da link, pulsante ed elemento 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 vuoi nascondere il contorno tratteggiato in Firefox senza rimuovere il bordo (e quindi la larghezza extra sul pulsante) puoi usare:

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

Il codice CSS di seguito funziona per rimuovere questo:

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

Sembra che l'unico modo per raggiungere questo obiettivo sia l'impostazione

browser.display.focus_ring_width = 0

in about: config per browser.

Funziona su Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

Dopo aver provato molte opzioni di cui sopra, 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 annulla semplicemente ciò che fa bootstrap per i pulsanti 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;
}

NOTA che il tuo file CSS personalizzato dovrebbe venire dopo il file CSS Bootstrap nel tuo codice HTML per sovrascriverlo.

Sì, non perdere ! Importante

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

Puoi provare button::-moz-focus-inner {border: 0px solid transparent;}nel tuo CSS.