Rimuovi il bordo blu dal pulsante css in stile personalizzato in Chrome

Sto lavorando su una pagina Web e voglio <button>tag personalizzati. Quindi, con i CSS, ho detto: border: none. Ora funziona perfettamente in Safari, ma in Chrome, quando faccio clic su uno dei pulsanti, mette un fastidioso bordo blu attorno ad esso. Ho pensato button:active { outline: none }o button:focus { outline:none }avrebbe funzionato, ma nessuno dei due. Qualche idea?

Ecco come appare prima di essere cliccato (e come voglio che appaia ancora dopo essere stato cliccato):

E questo è il confine di cui sto parlando:

Ecco il mio CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Fare questo non è raccomandato in quanto regredisce l' accessibilità del tuo sito; per maggiori informazioni, vedi questo post .

Detto questo, se insisti, questo CSS dovrebbe funzionare:

button:focus {outline:0;}

Dai un'occhiata o JSFiddle: http://jsfiddle.net/u4pXu/

O in questo frammento:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Aspettare! C'è una ragione per quella brutta sagoma!

Prima di rimuovere quel brutto contorno blu, potresti prendere in considerazione l' accessibilità . Per impostazione predefinita, quel contorno blu è posizionato su elementi focalizzabili. In questo modo gli utenti con problemi di accessibilità sono in grado di focalizzare quel pulsante eseguendo la tabulazione su di esso. Alcuni utenti non hanno le capacità motorie per usare un mouse e devono usare solo la tastiera (o qualche altro dispositivo di input) per l'interazione con il computer. Quando rimuovi il contorno blu, non c'è più un indicatore visivo su quale elemento è focalizzato. Se si desidera rimuovere il contorno blu, è necessario sostituirlo con un altro tipo di indicazione visiva che il pulsante è attivo.

Possibile soluzione: pulsanti scuri quando messi a fuoco

Per gli esempi seguenti, il contorno blu di Chrome è stato rimosso per la prima volta utilizzando button:focus { outline:0 !important; }

Ecco i pulsanti di base di Bootstrap che appaiono normalmente:

Ecco i pulsanti quando ricevono lo stato attivo:

Ecco i pulsanti quando vengono premuti:

Come puoi vedere, i pulsanti sono un po 'più scuri quando ricevono lo stato attivo. Personalmente, consiglierei di rendere i pulsanti di messa a fuoco ancora più scuri in modo che ci sia una differenza molto evidente tra lo stato di messa a fuoco e lo stato normale del pulsante.

Non è solo per utenti disabili

Rendere il tuo sito più accessibile è qualcosa che viene spesso trascurato ma può aiutare a creare un'esperienza più produttiva nel tuo sito web. Ci sono molti utenti normali che usano i comandi da tastiera per navigare attraverso i siti Web al fine di tenere le mani sulla tastiera.

Rimuovo semplicemente il contorno da tutti i tag nella pagina selezionando tutto e applicando il contorno: nessuno a tutto :)

*:focus {outline:none}

Come menzionato bagofcole, potrebbe essere necessario aggiungere anche! Important, quindi lo stile sarà simile a questo:

*:focus {outline:none !important}

Nel mio caso di questo problema ho dovuto specificare box-shadow: none

button:focus {
  outline:none;
  box-shadow: none;
}

Non dimenticare la !importantdichiarazione, per un risultato migliore

button:focus {outline:0 !important;}

Una regola che ha la proprietà! Important sarà sempre applicata indipendentemente da dove appare quella regola nel documento CSS.

La rimozione outlineè terribile per l'accessibilità! Idealmente, l'anello di messa a fuoco viene visualizzato solo quando l'utente intende utilizzare la tastiera .

Usa : focus-visibile . Al momento è una proposta del W3C per lo styling del solo utilizzo della tastiera tramite CSS ed è supportata in Firefox ( caniuse ). Fino a quando gli altri principali browser non lo supportano, è possibile utilizzare questo robusto polyfill .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

Ho anche scritto un post più dettagliato nel caso abbiate bisogno di maggiori informazioni.

Aggiungi questo nel tuo file CSS.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Usa questo:

:active {
    outline:none;
}

o questo se non funziona:

:active {
   outline:none !important;
}

Questo funziona per me (almeno FF e Chrome). Invece di scegliere come target lo :focusstato, :activescegli come target lo stato e ciò rimuoverà l'evidenziazione esteticamente invadente nel tuo browser quando un utente fa clic su un collegamento. Ma manterrà comunque gli stati di focus quando un utente con schede di disabilità o maiuscole attraverso una pagina. Entrambe le parti sono felici. :)

per questo problema:

Usa questo:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

risultato:

Per chiunque usi Bootstrap e abbia questo problema, usano: active: focus così come solo: active e: focus quindi avrai bisogno di:

element:active:focus {
    outline: 0;
}

Spero che qualcuno abbia risparmiato un po 'di tempo a capirlo, mi ha sbattuto la testa per un po' chiedendomi perché una cosa così semplice non funzionasse.

La maggior parte delle soluzioni non funzionerà se si utilizza Bootstrap 4.1 e possibilmente altre versioni. Dopo molti colpi alla testa, ho scoperto che devi applicare la classe shadow-none :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

Questo è ciò che ha funzionato per me:

button:focus {
    box-shadow:none;
}

La correzione per Chrome e altri browser

button:focus { outline: none !important; box-shadow: none !important; }

prova questo codice per tutti gli elementi che hanno problemi di bordo blu

*{
outline: none;
}

o

*{
outline-style: none;
}

Un altro modo per risolvere il problema dell'accessibilità che non è stato ancora menzionato qui è attraverso un po 'di Javascript . I crediti vanno a questo penetrante blogpost di hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

L'approccio qui è davvero semplice ma efficace: l' aggiunta di una classe quando le persone iniziano a utilizzare il tasto Tab per navigare nella pagina (e facoltativamente rimuoverla quando si passa nuovamente al mouse. Quindi è possibile utilizzare questa classe per visualizzare o meno un contorno di messa a fuoco .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

Ho affrontato lo stesso problema, quindi ho usato CSS semplici

.custom-button {
    outline: none
}

Se si desidera eliminare lo stesso effetto in input, è possibile aggiungere il seguente codice e il pulsante.

input:focus {outline:0;}

Fino a quando tutti i browser moderni non inizieranno a supportare css-selector : focus-visible ,
il modo più semplice e possibilmente migliore per salvare l'accessibilità è rimuovere questo focus complicato solo per gli utenti del mouse e salvarlo per gli utenti della tastiera :

1.Utilizza questo piccolo polyfill (circa 10kb): https://github.com/WICG/focus-visible
2. Aggiungi il prossimo codice da qualche parte nel tuo CSS:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Supporto browser di css4-selector: focus-visibile in questo momento molto debole:
https://caniuse.com/#search=focus-visible

Basta scrivere outline:none;. Non è necessario utilizzare pseudo elementofocus

Questo è un problema nella famiglia Chrome ed è stato lì per sempre.

È stato sollevato un bug https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Può essere mostrato qui: https://codepen.io/anon/pen/Jedvwj non appena aggiungi un bordo a qualcosa di simile a un pulsante (ad esempio ruolo = "pulsante" è stato aggiunto a un tag, ad esempio) Chrome si rovina e imposta lo stato di attivazione quando si fa clic con il mouse.

Consiglio vivamente di utilizzare questa correzione: https://github.com/wicg/focus-visible .

Basta fare quanto segue

npm install --save focus-visible

Aggiungi lo script al tuo html:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

o importalo nel tuo file di voce principale se usi webpack o qualcosa di simile:

import 'focus-visible/dist/focus-visible.min';

quindi inseriscilo nel tuo file css:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

È possibile solo impostare:

button:focus {outline:0;}

ma se hai un gran numero di utenti, stai svantaggiando quelli che non possono usare i mouse o quelli che vogliono semplicemente usare la tastiera per la velocità.

Ho avuto lo stesso problema con bootstrap. Ho risolto sia con il contorno che con l'ombra della scatola

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}