it-swarm-eu.dev

Come rimuovere il contorno punteggiato di Firefox su BOTTONI e collegamenti?

Posso fare in modo che Firefox non mostri i brutti contorni del focus punteggiato link con questo:

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

i pulsanti hanno ancora il contorno puntato quando faccio clic su di essi.

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

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

Non c'è bisogno di definire un selettore.

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

Tuttavia, questo viola le migliori pratiche di accessibilità dal W3C. Lo schema è lì per aiutare chi naviga con le tastiere.

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

280
Anderson Custódio

Se preferisci usare 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; 
    }
46
chinkchink

Il sotto funzionava per me in caso di LINKS, pensavo alla condivisione, nel caso qualcuno fosse interessato.

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

Saluti!

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

[Aggiorna] 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 il profilo 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

9
Renato Carvalho

Ho provato la maggior parte delle risposte qui, ma nessuno di loro ha funzionato per me. Quando ho capito che devo eliminare il contorno blu sui pulsanti di Chrome, ho trovato un'altra soluzione. Rimuovi il bordo blu dal pulsante in 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;}
7
Vartox

Ci sono molte soluzioni trovate sul web per questo, molte delle quali funzionano, ma per forzare questo, in modo che nulla possa evidenziare/mettere a fuoco una volta che si usa 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'accordo!

5
Shannon Hochkins

Non c'è modo di rimuovere questi focus tratteggiati in Firefox usando i CSS.

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

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

5
Vitaly Sharovatov

Basta aggiungere questo css per selezionare la casella

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

Funziona bene per me.

4
Abhay Singh

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)

input with white dots

Dopo (i punti bianchi sono invisibili) enter image description here

Se si desidera applicare solo su pochi campi di input, pulsanti, ecc. Utilizzare il codice più specifico.

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

Felice Coding !!

4
Madan Sapkota

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

Potresti voler intensificare l'attenzione piuttosto che eliminarla.

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

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

Se hai un bordo su un pulsante e vuoi nascondere il contorno tratteggiato in Firefox senza rimuovendo il bordo (e quindi la larghezza extra del pulsante) poter usare:

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

Sembra che l'unico modo per ottenere questo risultato è impostare

browser.display.focus_ring_width = 0

in about: config su una base per browser.

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

Dove button può essere qualunque sia il selettore CSS per il quale si desidera disabilitare il comportamento.

2
wavded

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

Se devi eliminarlo a causa di un problema di progettazione, aggiungi uno stato :focus al pulsante che lo sostituisce con qualche altro segnale visivo, ad esempio modificando il bordo con un colore più luminoso o qualcosa del genere.

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

E never usa la funzione blur() js. Usa la pseudo classe ::-moz-focus-inner.

2
Flatline

Il codice CSS qui sotto 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;
}
2
kurumkan

Rimuovi il contorno punteggiato da link, pulsante e 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;
}
2
Fizer Khan

Questo otterrà il controllo della gamma:

: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

2
bob

Sì, non perdere ! Important 

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

Dopo aver provato molte opzioni da quanto sopra, solo le seguenti hanno funzionato per me.

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

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

0
usual

Funziona su firefox v-27.0

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

Insieme a Bootstrap 3 ho usato questo codice. La seconda serie di regole solo annulla che cosa fa bootstrap per i pulsanti di attivazione/attivazione:

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 cst di Bootstrap nel tuo codice html per sovrascriverlo.

0
Ehsan88