le bouton d'amorçage affiche un contour bleu lorsqu'il est cliqué

J'ai ajouté ceci mais le contour bleu apparaît toujours lorsque le bouton est cliqué.

.btn:focus {
  outline: none;
}

comment supprimer ce truc laid?

Peut-être que vos propriétés sont remplacées. Essayez de joindre !importantà votre code avec le: active.

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

Ajoutez également box-shadow car sinon vous verrez toujours l'ombre autour du bouton.

Bien que ce ne soit pas une bonne pratique à utiliser! Important, je vous suggère d'utiliser une classe plus spécifique, puis d'essayer d'appliquer le css avec l'utilisation de! Important ...

Dans la dernière version de Bootstrap, j'ai trouvé que la suppression du contour ne fonctionnait pas. Et je dois ajouter ceci car il y a aussi une boîte-ombre:

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

Il existe une classe boostrap intégrée shadow-nonepour désactiver box-shadow(non outline) ( https://getbootstrap.com/docs/4.1/utilities/shadows/ ). Cela supprime l'ombre du bouton:

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

Essayez ci-dessous le code

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

Cela m'arrivait dans Chrome (mais pas dans Firefox). J'ai découvert que la outlinepropriété était définie par Bootstrap comme outline: 5px auto -webkit-focus-ring-color;. Résolu en remplaçant la outlinepropriété plus tard dans mon CSS personnalisé comme suit:

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

cela résoudra le bouton avec un texte, le bouton seulement une icône ou un bouton est un lien:

 <!--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;
}

si vous ajoutez border:none !important;

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

puis le bouton deviendra plus petit lorsque vous cliquez dessus.

Essaye ça

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

Dans Bootstrap 4, ils utilisent box-shadow: 0 0 0 0px rgba(0,123,255,0);sur: focus, si j'ai résolu mon problème avec

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);
}

Même après avoir supprimé le contour du bouton en définissant sa valeur sur 0, il y a toujours un comportement amusant sur le bouton lorsque vous cliquez dessus, sa taille diminue un peu. J'ai donc trouvé une solution optimale:

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

J'espère que cela t'aides...

Vous devez utiliser une imbrication appropriée, puis lui appliquer des styles.

• Cliquez avec le bouton droit sur le bouton et trouvez l'imbrication de classe exacte pour lui en utilisant (Inspecter l'élément à l'aide de Firebug pour Firefox), (Inspecter l'élément pour chrome).

• Ajoutez du style à toute la classe. Alors seulement ça marcherait

J'ai trouvé cela très utile dans mon cas après le clic sur le bouton.

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

J'ai choisi de supprimer simplement la largeur de la bordure :focus. Cela supprime l'espace laid entre le contour et les coins arrondis du bouton. Pour une raison quelconque, ce problème se produit uniquement sur les éléments de bouton réels et non sur les <a class="btn">éléments.

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

Cela peut aider si quelqu'un a toujours cette question non résolue.

(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>

Voici ma solution Boostrap 4 pour supprimer le contour du bouton

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

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

Je viens d'avoir le même problème et le code suivant a fonctionné pour moi:

.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>

En espérant que cela vous aidera!

En fait, dans bootstrap, toutes les variables sont définies pour tous les cas. Dans votre cas, il vous suffit de remplacer la variable par défaut «$ input-btn-focus-box-shadow» du fichier «_variables.scss». Comme ceci: $input-btn-focus-box-shadow: none; Notez que vous devez remplacer cette variable dans votre propre '_yourCusomVarsFile.scss' personnalisé. Et ce fichier doit être importé dans le projet dans le premier ordre, puis bootstrap comme suit:

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

Les variables bootstraps vont avec l'indicateur '! Default'.

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

Ainsi, dans votre fichier, vous remplacerez les valeurs par défaut. Voici l'illustration:

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

Le tout premier var a plus de priorité que le second. Il en va de même pour les autres états et cas. J'espère que cela vous aidera.

Voici le fichier '_variable.scss' du repo, où vous pouvez trouver toutes les valeurs initiales de bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

a:focus {
  outline: none;
}

cela fonctionne pour moi sur BS3

Celui-ci a fonctionné pour moi dans Bootstrap 4:

.btn {border-color: transparent;}

Essayer

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

Gardez à l'esprit que si votre bouton se trouve à l'intérieur d'une ancre comme:

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

Ajouter le style au bouton lui-même peut ne pas suffire, vous devrez peut-être ajouter les a:focus, a:active { outline: none }règles CSS le cas échéant (cela a fonctionné pour moi).

Essayez ci-dessous

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

Parfois, {outline: 0}n'a pas résolu le problème et nous pouvons essayer{box-shadow: none;}

J'utilise bootstrap 4, vous pouvez utiliser contour et box-shadow.

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

Ou si le bouton est à l'intérieur d'un élément comme un div sans arrière-plan, box-shadow suffit.

#buttonId {
     box-shadow: none;
}

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

Si vous utilisez la version 4.3 ou supérieure, votre code ne fonctionnera pas correctement. C'est ce que j'ai utilisé. Cela a fonctionné pour moi.

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

Au lieu de cibler sur la classe de bouton ( .btn ), ici je cible l' élément de bouton lui-même et cela fonctionne pour moi.

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

Et peut utiliser la shadow-noneclasse pour le champ de saisie

Voici une méthode non CSS. En utilisant JQuery, supprimez simplement la classe "focus" à chaque fois que l'élément a été cliqué.

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

Cette méthode peut faire clignoter la bordure, puis revenir brièvement en arrière, ce qui ne semble pas mal à mon avis (cela ressemble à une partie de la réponse lorsque le bouton est cliqué).

La raison pour laquelle j'ai utilisé .mousemove () est que .click () et .mouseup () se sont tous deux révélés inefficaces.

Changer ces valeurs a fonctionné pour moi. Je l'ai trouvé en regardant les outils de développement de 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*/;
}

Cela conserve également l'ombre du bouton, cela ne change que la couleur du bouton au clic.

Remplacez les instructions bootstrap exactes:

.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;
}

Changer la couleur de la bordure en gris

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

La méthode SCSS pour tous les éléments (pas seulement les boutons):

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