web-dev-qa-db-fra.com

bouton bootstrap

J'ai ajouté ceci, mais le contour bleu apparaît quand on clique sur le bouton.

.btn:focus {
  outline: none;
}

comment enlever cette chose laide?

csstwitter-bootstrap
93
user3522457

Peut-être que vos propriétés sont en train d'être remplacées . Essayez d'attacher !important à votre code avec le: actif.

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

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

155
Janak

Dans la dernière version de Bootstrap, 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;
}
33
Chang

Cela m'arrivait dans Chrome (mais pas dans Firefox). J'ai découvert que la propriété outline était définie par Bootstrap en tant que outline: 5px auto -webkit-focus-ring-color;. Résolu en redéfinissant la propriété outline ultérieurement dans mon CSS personnalisé, comme suit:

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

cela résoudra bouton avec un texte, 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;
}

alors le bouton deviendra plus petit quand on cliquera dessus.

11
Eddy

Essayez ci-dessous Code 

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

La classe boostcode shadow-none intégrée permet de désactiver box-shadow (pas 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>
11
Rinat

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);
}
5
Slobodan Kovacevic

Essaye ça 

.btn
{
    box-shadow: none;
    outline: none;
}
5
Subodh Sharma

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 ça va aider!

3
paul

Cela peut aider si quelqu'un a toujours cette question en suspens.

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

3
Gaby Evangelista

Voici ma solution Bootstrap 4 pour supprimer le contour du bouton

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

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

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

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

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

$('#buttonId').blur();
3
Danny Cullen

Vous devez utiliser une imbrication correcte, puis lui appliquer des styles. 

  • Cliquez avec le bouton droit de la souris sur le bouton et recherchez l’imbrication de classe exacte à l’aide de (élément d’inspection utilisant firebug pour firefox), (élément d’inspection pour chrome).

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

2
Orahmax

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

.btn {border-color: transparent;}

2
Steffo Dimfelt
a:focus {
  outline: none;
}

cela fonctionne pour moi sur BS3

2
Alex LH

Essayez le ci-dessous

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

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

1
xhunter

Gardez à l'esprit que si votre bouton est à 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 règles CSS a:focus, a:active { outline: none } le cas échéant (cela a fonctionné pour moi).

1
RyanT

J'utilise bootstrap 4, vous pouvez utiliser les contours 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, l'ombre de la boîte suffit.

#buttonId {
     box-shadow: none;
}

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

1
webtechnelson

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;
}
0
Vaibhav Singh

Changer ces valeurs a fonctionné pour moi. Je l'ai trouvé en consultant 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, il ne change que la couleur du bouton au clic.

0
Ivan Aldwin A. Cristobal

Voici une méthode non-CSS. Avec JQuery, supprimez simplement la classe "focus" chaque fois que vous avez cliqué sur l'élément.

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

Cette méthode peut faire apparaître la bordure, puis la faire disparaître brièvement, ce qui n’a pas l’air mauvais à mon avis (cela ressemble à une partie de la réponse lorsque vous cliquez sur le bouton).

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

0
Wesley Kelly

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

En fait, dans le 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 suit: $input-btn-focus-box-shadow: none; Notez que vous devez remplacer cette variable dans votre propre fichier personnalisé '_votreCusomVarsFile.scss'. Et ce fichier doit être importé dans le projet dans le premier ordre, puis bootstrap comme ceci:

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

Les vars d'amorçage vont avec le drapeau '! Default'.

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

Donc, dans votre fichier, vous allez remplacer les valeurs par défaut . Ici l'illustration: 

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

Les tous premiers varient plus de priorité que deuxième. La même chose s’applique aux autres états et cas… __. J'espère que cela vous aidera.

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

Chears 

0
Tsurule Vol

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

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

Et peut utiliser shadow-none class pour le champ de saisie

0
Nawaraj

très simple : 

.btn {outline: none;}
0
Saurabh Mistry