I miei pulsanti hanno tutti un punto culminante intorno a loro dopo aver fatto clic su di essi. Questo è in Chrome.

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

Sto usando Bootstrap con un tema, ma sono abbastanza sicuro che non lo sia: lo stavo già notando su un altro progetto.

Va via se uso un <a>tag anziché <button>. Perché? Se volessi usare <button>come lo farei andare via?

Ho trovato queste domande e risposte in un'altra pagina e l'override dello stile di attivazione dei pulsanti ha funzionato per me. Questo problema può essere specifico per MacOS con Chrome.

.btn:focus {
  outline: none;
  box-shadow: none;
}

Si noti tuttavia che ciò ha implicazioni per l'accessibilità e non è consigliato fino a quando non si dispone di un buono stato di messa a fuoco coerente per i pulsanti e gli input. Secondo i commenti qui sotto, ci sono utenti là fuori che non possono usare i topi.

Vuoi qualcosa come:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Il metodo .blur () rimuove correttamente l'evidenziazione del focus e non confonde gli stili di Bootstraps.

la mia comprensione è che l'attenzione viene prima applicata dopo l' onMouseDownevento, in modo da chiamare e.preventDefault()inonMouseDown può essere una soluzione pulita a seconda delle esigenze. Questa è certamente una soluzione di accessibilità, ma ovviamente regola il comportamento dei clic del mouse che potrebbe non essere compatibile con il tuo progetto web.

Attualmente sto usando questa soluzione (all'interno di un react-bootstrapprogetto) e non ricevo uno sfarfallio della messa a fuoco o lo stato attivo dei pulsanti dopo un clic, ma sono ancora in grado di impostare la mia messa a fuoco e visualizzare visivamente lo stato attivo degli stessi pulsanti.

Non riesco a credere che nessuno l'abbia ancora pubblicato.

Usa un'etichetta invece di un pulsante.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Violino

Anche se è facile rimuovere il contorno per tutti i pulsanti focalizzati (come nella risposta dell'utente 1933897 ), ma quella soluzione è pessima dal punto di vista dell'accessibilità (ad esempio, vedi Interrompi messaggistica con la struttura Focus predefinita del browser )

D'altra parte, è probabilmente impossibile convincere il tuo browser a smettere di definire come focalizzato il tuo pulsante cliccato se pensa che sia focalizzato dopo averlo cliccato (ti sto guardando, Chrome su OS X).

Quindi cosa possiamo fare? Mi vengono in mente un paio di opzioni.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Stai chiedendo al tuo browser di rimuovere lo stato attivo attorno a qualsiasi pulsante immediatamente dopo aver fatto clic sul pulsante. Usando mouseupinvece di clickmantenere il comportamento predefinito per le interazioni basate sulla tastiera ( mouseupnon viene attivato dalla tastiera).

2) CSS: .btn:hover { outline: 0 !important }

Qui si disattiva la struttura solo per i pulsanti al passaggio del mouse . Ovviamente non è l'ideale, ma potrebbe essere sufficiente in alcune situazioni.

Questo ha funzionato per me. Ho creato una classe personalizzata che sostituisce il CSS necessario.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-Webkit-box-shadow funzionerà con i browser Chrome e Safari.

Questo funziona per me, un'altra soluzione non menzionata. Basta lanciarlo nell'evento click ...

$(this).trigger("blur");

O chiamalo da un altro evento / metodo ...

$(".btn_name").trigger("blur");

Se si utilizza la regola :focus { outline: none; }per rimuovere i contorni, il collegamento o il controllo saranno attivabili ma senza indicazione di attivazione per gli utenti della tastiera. Metodi per rimuoverlo tale con JS comeonfocus="blur()" sono anche peggio e comporteranno l'impossibilità per gli utenti della tastiera di interagire con il controllo.

Gli hack che puoi usare, che sono in qualche modo OK , includono l'aggiunta di :focus { outline: none; }regole quando gli utenti interagiscono con il mouse e li rimuovono se viene rilevata un'interazione da tastiera. Lindsay Evans ha fatto una lib per questo: https://github.com/lindsayevans/outline.js

Preferirei impostare una classe sul tag html o body. E avere il controllo nel file CSS di quando utilizzare questo.

Ad esempio (i gestori di eventi inline sono solo a scopo dimostrativo):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

Ho messo insieme una penna: http://codepen.io/snobojohan/pen/RWXXmp

Ma attenzione, ci sono problemi di prestazioni. Questo costringe a ridipingere ogni volta che l'utente passa tra mouse e tastiera. Maggiori informazioni su Come evitare vernici non necessarie http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

Ho notato lo stesso e anche se mi dà davvero fastidio, credo che non ci sia un modo corretto di gestirlo.

Vorrei raccomandare contro tutte le altre soluzioni fornite perché eliminano completamente l'accessibilità del pulsante, quindi ora, quando si fa clic sul pulsante, non si ottiene lo stato attivo previsto.

Questo dovrebbe essere evitato!

.btn:focus {
  outline: none;
}

Trovo una soluzione quando ci concentriamo, bootstrap usa box-shadow, quindi lo disabilitiamo (non abbastanza reputazione, impossibile caricare l'immagine :().

aggiungo

.btn:focus{
    box-shadow:none !important;
}

Funziona.

OPZIONE 1: utilizzare la :focus-visiblepseudo-classe

La :focus-visiblepseudo-classe può essere utilizzata per eliminare i contorni sgradevoli e gli anelli di messa a fuoco sui pulsanti e sui vari elementi per gli utenti che NON navigano tramite tastiera (ovvero, tramite tocco o clic del mouse).

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Avvertenza: a partire dal 2020, la :focus-visiblepseudo-classe non è ampiamente supportata da tutti i browser . Tuttavia il polyfill è molto facile da usare; vedere le istruzioni di seguito.

OPZIONE 2: utilizzare il .focus-visiblepolyfill

Questa soluzione utilizza una normale classe CSS anziché la pseudo-classe sopra menzionata e ha un ampio supporto del browser perché è un polifill ufficiale basato su Javascript .

Passaggio 1: aggiungi le dipendenze Javascript alla tua pagina HTML

Nota: il polyfill con focus visibile richiede un polyfill aggiuntivo per diversi browser meno recenti che non supportano classList :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

Passaggio 2: aggiungi il seguente CSS al tuo foglio di stile

La seguente è una versione modificata della soluzione CSS documentata in modo più approfondito sopra.

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Passaggio 3 (facoltativo): utilizzare la classe 'focus-visible' ove necessario

Se hai elementi in cui vuoi effettivamente mostrare l'anello di messa a fuoco quando qualcuno fa clic o usa il tocco, aggiungi semplicemente la focus-visibleclasse all'elemento DOM.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Risorsa:

• https://css-tricks.com/keyboard-only-focus-styles/

demo:

• https://wicg.github.io/focus-visible/demo/

Se quanto sopra non funziona per te, prova questo:

.btn: focus {outline: none; box-shadow: none; border: 2px solid transparent;}

Come sottolineato dall'utente1933897, questo potrebbe essere specifico per MacOS con Chrome.

In ritardo, ma chi lo sa può aiutare qualcuno. Il CSS sarebbe simile a:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

L'HTML sarebbe simile a:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

In questo modo puoi mantenere btn e i suoi comportamenti associati.

L'ho menzionato in un commento sopra, ma vale la pena elencarlo come una risposta separata per chiarezza. Fintanto che non hai bisogno di concentrarti sul pulsante, puoi utilizzare l'evento focus per rimuoverlo prima che possa applicare qualsiasi effetto CSS:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Questo evita lo sfarfallio che può essere visto quando si utilizza l'evento click. Ciò limita l'interfaccia e non sarà possibile eseguire la tabulazione sul pulsante, ma non è un problema in tutte le applicazioni.

Stile

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

utilizzando

<button class="btn btn-primary not-focusable">My Button</button>

Prova questa soluzione per rimuovere il bordo attorno al pulsante. Aggiungi questo codice in CSS.

Provare

button:focus{
outline:0px;
}

Se non funziona, utilizzare di seguito.

button:focus{
 outline:none !important;
 }

Per le persone che desiderano un modo css puro per farlo:

:focus:not(:focus-visible) { outline: none }

Questo potrebbe funzionare anche per il collegamento e così via, e bonus, mantiene l'accessibilità della tastiera. Infine, viene ignorato dai browser che non supportano: focus-visible

Abbiamo riscontrato un problema simile e abbiamo notato che Bootstrap 3 non presenta il problema nelle schede (in Chrome). Sembra che stiano usando lo stile di contorno che consente al browser di decidere cosa fare meglio e Chrome sembra fare quello che vuoi: mostra il contorno quando focalizzato a meno che non abbia appena fatto clic sull'elemento.

Il supporto per outline-styleè difficile da definire poiché il browser decide cosa significhi. Meglio controllare alcuni browser e avere una regola di fallback.

Un'altra possibile soluzione è quella di aggiungere una classe utilizzando un listener Javascript quando l'utente fa clic sul pulsante e quindi rimuovere quella classe in primo piano con un altro listener. Ciò mantiene l'accessibilità (tabulazione visibile) impedendo al contempo il comportamento bizzarro di Chrome di considerare un pulsante focalizzato quando si fa clic.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Esempio completo qui: https://jsfiddle.net/4bbb37fh/

È lavoro, spero di aiutarti

.btn:focus, .btn:focus:active {
    outline: none;
}

.btn:focus:active {
  outline: none;
}

questo rimuove il contorno al clic, ma mantiene lo stato attivo durante la tabulazione (per a11y)

Funziona meglio

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}

  .btn:focus,.btn:active, a{
        outline: none !important;
        box-shadow: none;
     }

questo schema: nessuno funzionerà sia per il pulsante che per un tag

Aggiungi questo nei CSS:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Ho trovato una soluzione semplicemente aggiungere sotto la riga nel tuo codice CSS.

button:focus { outline: none }

Ho avuto questo stesso problema su MacOS e Chrome mentre utilizzavo un pulsante per attivare un evento di "transizione". Se qualcuno che sta leggendo questo sta già utilizzando un listener di eventi, puoi risolverlo chiamando le .blur()tue azioni.

Esempio:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Tuttavia, se non stai già utilizzando un listener di eventi, aggiungerne uno solo per risolvere questo problema potrebbe aggiungere un sovraccarico non necessario e una soluzione di stile come le risposte precedenti fornisce è migliore.

Puoi impostare tabIndex="-1". Il browser salterà questo pulsante quando TAB attraverso i controlli attivabili.

Altre "correzioni" suggerite qui, rimuovono solo il contorno del focus, ma lasciano ancora i pulsanti tababili. Tuttavia, dal punto di vista dell'usabilità, hai già rimosso il bagliore, quindi l'utente non saprà in alcun modo quale sia il pulsante attualmente focalizzato.

D'altra parte, rendere il pulsante non tabulare ha implicazioni sull'accessibilità.

Lo sto usando per rimuovere il contorno del focus dal pulsante X in bootstrap modal, che ha il pulsante "Chiudi" duplicato in basso in ogni modo, quindi la mia soluzione non ha alcun impatto sull'accessibilità.

Se stai usando un browser webkit (e potenzialmente un browser compatibile con il prefisso del fornitore webkit), quel contorno appartiene alla -webkit-focus-ringpseudoclasse del pulsante . Basta impostare outlinesu none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome è un tale browser webkit e questo effetto si verifica anche su Linux (non solo una cosa macOS, anche se alcuni stili di Chrome sono solo macOS)

Stavo <a>riscontrando lo stesso problema usando la funzione di pulsante e ho scoperto che mancava una soluzione alternativa aggiungendo attr type="button", almeno per me si comporta normalmente.

<a type="button" class="btn btn-primary">Release Me!</a>

direttamente nel tag html (in uno scenario in cui potresti voler lasciare il tema bootstrap in posizione altrove nel tuo design) ..

esempi da provare ..

<button style="border: transparent;">

<button style="border: 1px solid black;">

..ect ,. a seconda dell'effetto desiderato.