Bouton Bootstrap-enlever le contour sur Chrome OS X

.btn:focus {
    outline: none;
}

n'a toujours pas fonctionné dans Google Chrome, ce qui suit devrait supprimer complètement toute lueur de bouton.

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

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

ceci devrait supprimer le contour et l'ombre de boîte

dans bootstrap 4 le contour n'est plus utilisé, mais le box-shadow. Si c'est votre cas, il suffit de faire la commande suivante:

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

.btn.active ou .btn.focus seul ne peut pas remplacer les styles de Bootstrap. Pour le thème par défaut:

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

avec scss:

$btn-focus-box-shadow: none!important;

Rechercher et remplacer

outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;

Remplacer

outline: 0;

Ce sera l'enlever, à court et à nettoyer:

.btn {
    outline: none !important;
}

vous pouvez mettre cette balise dans votre code html.

<button class='btn btn-primary' onfocus='this.blur'>
     Button Text
</button>

j'avais l'habitude de me concentrer parce que onclick affichait encore la lueur d'une microseconde et faisait un horrible Flash d'apparence en termes d'utilisation. Cela semblait se débarrasser après toutes les méthodes css a échoué.

CSS va à partir de ce fichier "onglet-focus.moins" dans le dossier mixins (cela pourrait être difficile à trouver, car les mixins ne sont pas affichés chez chrome dev-tools). Si vous devez modifier ceci:

// WebKit-style focus 

.tab-focus() {
      // Default
      outline: thin dotted;
      // WebKit
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
    }

dans les mixins des fichiers Sass de Bootstrap sources, supprimer tout $border Références (pas dans la variante de contour).

@mixin button-variant($color, $background, $border){ 
$active-background: darken($background, 10%);
//$active-border: darken($border, 12%);    
  color: $color;
  background-color: $background;
  //border-color: $border;
  @include box-shadow($btn-box-shadow);
  [...]
}

ou simplement codez que vous possédez _customButton.SCSS mixin.

la solution la plus simple est: créez un fichier CSS et tapez ceci:

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

Si les réponses ci-dessus ne fonctionnent toujours pas, ajouter ceci:

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

si quelqu'un utilise bootstrap sass, notez que le code est sur _reboot.fichier scss comme ceci:

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

donc si vous voulez garder le fichier _reboot, je suppose que vous pouvez le modifier avec CSS au lieu d'essayer de chercher une variable à changer.