pulsante bootstrap mostra un contorno blu quando si fa clic

Ho aggiunto questo, ma appare ancora il contorno blu quando si fa clic sul pulsante.

.btn:focus {
  outline: none;
}

come rimuovere quel brutto oggetto?

Forse le tue proprietà vengono sostituite. Prova ad allegare !importantal tuo codice insieme a: active.

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

Aggiungi anche box-shadow perché altrimenti vedrai ancora l'ombra attorno al pulsante.

Anche se questa non è una buona pratica da usare! Importante Ti suggerisco di usare una classe più specifica e quindi provare ad applicare il CSS con l'uso di! Important ...

Nell'ultima versione di Bootstrap, ho scoperto che rimuovere la struttura stessa non funziona. E devo aggiungere questo perché c'è anche un box-shadow:

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

Esistono classi boostrap integrate shadow-noneper la disabilitazione box-shadow(non outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Questo rimuove l'ombra del pulsante:

<button class='btn btn-primary shadow-none'>Example button</button>

Prova sotto il codice

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}

Questo mi stava succedendo in Chrome (anche se non in Firefox). Ho scoperto che la outlineproprietà era impostata da Bootstrap come outline: 5px auto -webkit-focus-ring-color;. Risolto sostituendo la outlineproprietà in seguito nel mio CSS personalizzato come segue:

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

questo risolverà pulsante con un testo, pulsante solo un'icona o un pulsante è un collegamento:

 <!--1. button with a text -->
 <button type="button" class="btn btn-success" id="newWord">Save</button>

 <!--2. button only with a close icon -->
 <button type="button" class="close"></button>

 <!--3. button is a link -->
 <a class="btn btn-success btn-xs" href="#">Save</a>



button,
button:active,
button:focus, 
button:hover,
.btn,
.btn:active, 
.btn:focus, 
.btn:hover{   
    outline:none !important;
}

se aggiungi border:none !important;

{
    border:none !important;
    outline:none !important;
}

quindi il pulsante diventerà più piccolo quando si fa clic.

Prova questo

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

In Bootstrap 4 usano box-shadow: 0 0 0 0px rgba(0,123,255,0);: focus, si ho risolto il mio problema

a.active.focus,
a.active:focus,
a.focus,
a:active.focus,
a:active:focus,
a:focus,
button.active.focus,
button.active:focus,
button.focus,
button:active.focus,
button:active:focus,
button:focus,
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline: 0;
    outline-color: transparent;
    outline-width: 0;
    outline-style: none;
    box-shadow: 0 0 0 0 rgba(0,123,255,0);
}

Anche dopo aver rimosso il contorno dal pulsante impostando il suo valore su 0, c'è ancora un comportamento divertente sul pulsante quando viene cliccato, le sue dimensioni si riducono un po '. Quindi ho trovato una soluzione ottimale:

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

Spero che questo ti aiuti...

È necessario utilizzare l'annidamento corretto e quindi applicare gli stili ad esso.

• Fare clic con il tasto destro del mouse sul pulsante e trovare l'esatta classe di annidamento usando (Ispeziona elemento usando firebug per firefox), (ispeziona elemento per chrome).

• Aggiungi stile a tutto il gruppo di classe. Solo allora avrebbe funzionato

L'ho trovato abbastanza utile nel mio caso dopo il clic del pulsante.

$('#buttonId').blur();

Ho scelto di rimuovere semplicemente la larghezza del bordo :focus. Ciò rimuove il brutto spazio tra il contorno e gli angoli arrotondati del pulsante. Per qualche motivo questo problema si verifica solo su elementi di pulsanti effettivi e non su <a class="btn">elementi.

button.btn:focus {
  border-width: 0;
}

Questo può aiutare se qualcuno ha ancora irrisolto questa domanda.

(function() {
  $('button').on('click', function() {
    $("#action").html("button was clicked");
    console.log("the button was clicked");
  });
})();

.btn-clear {
  background-color: transparent !important;
  border-style: none !important;
  cursor: pointer;
}

.btn-clear:active,
.btn-clear:focus {
  outline-style: none !important;
  outline-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- this button has default style -->
<button>Action</button>
<!-- this button is clear of style -->
<button class="btn-clear">Action</button>

<label id="action"></label>

Ecco la mia soluzione Boostrap 4 per rimuovere il contorno del pulsante

/*
* Boostrap 4
* Remove blue outline from button
*/

.btn:focus,
.btn:active {
  box-shadow: none;
}

Ho appena avuto lo stesso problema e il seguente codice ha funzionato per me:

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

.btn {
  margin:32px;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->




<button type="button" class="btn btn-default">Button</button>

Sperando che possa aiutare!

In realtà in bootstrap sono definite tutte le variabili per tutti i casi. Nel tuo caso devi solo sovrascrivere la variabile di default '$ input-btn-focus-box-shadow' dal file '_variables.scss'. In questo modo: $input-btn-focus-box-shadow: none; Nota che devi sovrascrivere quella variabile nel tuo '_yourCusomVarsFile.scss' personalizzato. E quel file dovrebbe essere importato nel progetto nel primo ordine e quindi bootstrap in questo modo:

@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";

Il bootstrap var va con flag '! Default'.

$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Quindi, nel tuo file, sostituirai i valori predefiniti. Ecco l'illustrazione:

$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;

Il primo var ha più priorità del secondo. Lo stesso vale per gli altri stati e casi. Spero che ti possa aiutare.

Ecco il file '_variable.scss' dal repository, dove puoi trovare tutti i valori iniziali da bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

chears

a:focus {
  outline: none;
}

questo funziona per me su BS3

Questo ha funzionato per me in Bootstrap 4:

.btn {border-color: transparent;}

Provare

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

Tieni presente che se il tuo pulsante si trova all'interno di un'ancora come:

<a href='some_link'>
    <button class='btn'>Button</button>
</a>

L'aggiunta dello stile al pulsante stesso potrebbe non essere sufficiente, potrebbe essere necessario aggiungere le a:focus, a:active { outline: none }regole CSS dove appropriato (ha funzionato per me).

Prova il seguito

.bootstrap-select .dropdown-toggle:focus 
 {
          outline: 0 !important;
 }

A volte {outline: 0}il problema non è stato risolto e possiamo provarci{box-shadow: none;}

Sto usando bootstrap 4, puoi usare outline e box-shadow.

#buttonId {
    box-shadow: none;
    outline: none;
}

O se il pulsante si trova all'interno di un elemento come un div senza sfondo, box-shadow è sufficiente.

#buttonId {
     box-shadow: none;
}

Esempio: https://codepen.io/techednelson/pen/XRwgRB

Se si utilizza la versione 4.3 o successiva, il codice non funzionerà correttamente. Questo è quello che ho usato. Ha funzionato per me.

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

Invece di scegliere come target la classe button ( .btn ), qui ho come target l' elemento button stesso e funziona per me.

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

E può usare la shadow-noneclasse per il campo di input

Ecco un metodo non CSS. Utilizzando JQuery, è sufficiente rimuovere la classe "focus" ogni volta che si fa clic sull'elemento.

$(".btn").mousemove(function(element) { $(this).removeClass("focus"); });

Questo metodo può far sì che il bordo si illumini e poi ritorni brevemente, il che non sembra male a mio avviso (sembra che faccia parte della risposta quando si fa clic sul pulsante).

Il motivo per cui ho usato .mousemove () è che .click () e .mouseup () si sono entrambi dimostrati inefficaci.

La modifica di questi valori ha funzionato per me. L'ho trovato guardando gli strumenti per sviluppatori di Chrome

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: /*Change This*/;
    border-color: /*Change This*/;
}

Ciò mantiene anche l'ombra del pulsante, cambia solo il colore del pulsante al clic.

Sostituisci le esatte istruzioni bootstrap:

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus{
 box-shadow: none;
}

Cambia il colore del bordo in grigio

.btn:focus,
.btn:active{
 border: 1px solid #ced4da !important;
}

Il modo SCSS per tutti gli elementi (non solo i pulsanti):

body {
  * {
    &:focus, &.focus,
    &:active, &.active {
      outline: transparent none 0 !important;
      box-shadow: 0 0 0 0 rgba(0,123,255,0) !important;
      -webkit-box-shadow: none !important;
    }
  }
}