bootstrap bouton affiche le contour bleu lorsqu'il est cliqué

J'ai ajouté cela, mais encore le contour bleu apparaît lorsque le bouton est cliqué.

.btn:focus {
  outline: none;
}

comment faire pour supprimer ce vilain truc?

essayez de définir :active pour le bouton. Supplémentaires: Utilisation de l'Inspecteur dans votre navigateur pour trouver le Problème.
Vous pouvez poster votre peu plus de code ou jsfiddle de démonstration afin que nous puissions vous aider
Pas sûr au sujet de boutons mais bootstrap ajoute box-shadow pour les champs de saisie qui peut être enlevé avec box-shadow:none;
FWIW, l'accent de style est important pour la navigation au clavier.
Une photo serait utile ici
continuez à faire défiler jusqu'à ce que vous atteignez @Janak répondre

InformationsquelleAutor user3522457 | 2014-04-28

css twitter-bootstrap

182

Peut-être vos propriétés se sont substituées.
Essayez de fixer !important à votre code avec l' :active .
```
.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}
```
Également ajouter box-shadow parce que sinon, vous pourrez toujours voir l'ombre autour du bouton.
- Cela a fonctionné pour moi avec bootstrap 3. Merci @janak
- Bien que ce n'est pas une bonne pratique à utiliser !important, je vous suggère d'utiliser une classe plus spécifique, puis essayez d'appliquer le css avec l'utilisation de la !important
- Mais pourquoi est-il nécessaire lors de la substitution de l' :active?
- Je peut aussi ajouter que, quand la destruction avec !important, les pseudo-classes ne sont pas nécessaires
- Si vous êtes en utilisant Bootstrap 4, ajouter box-shadow: none (et n'oubliez pas le préfixe -webkit-box-shadow: none) à cette réponse. Notez également que Bootstrap 4 a déjà .btn:focus { outline: none } dans son btn classes.
- Les repères visuels sont essentiels lorsqu'il n'est pas de la navigation avec la souris. Si vous supprimez le contour que vous devez ajouter quelques autres rétroaction visuelle, ou vous aurez des paralysés de votre site.
InformationsquelleAutor Janak
42

Dans la dernière version de Bootstrap, j'ai trouvé enlever le contour lui-même ne fonctionne pas. Et je dois ajouter cette raison, il est également un box-shadow:
```
.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}
```
- C'est ce qui a aidé pour moi.
- Cela a fonctionné pour moi avec Bootstrap 4. Merci!
- Si vous voulez vous assurer que vous êtes frapper tous vos boutons, il suffit d'utiliser le bouton { outline: none !important; box-shadow: none !important; }
InformationsquelleAutor Chang
35

Y sont intégrés en classe de bootstrap shadow-none pour la désactivation de box-shadow (pas outline) (https://getbootstrap.com/docs/4.1/utilities/shadows/). Cela supprime l'ombre de bouton:
```
<button class='btn btn-primary shadow-none'>Example button</button>
```
- Je vous remercie beaucoup.
- c'est la meilleure réponse
- C'EST la solution que vous cherchez. C'est la solution, se déplacent, se déplacent le long. Merci de cette résolu pour Firefox avec Bootstrap 4.
- Ce poste est d'environ supprimer le contour, pas l'ombre. Donc, malheureusement, ce commentaire est trompeuse.
- L'ombre et le contour sont très similaires, de sorte que beaucoup de gens ont ouvert cette question du sens suppression de l'ombre (je l'ai fait aussi). De toute façon, il n'est pas très important, parce que le but est d'aider les gens. A cette réponse aidé quelqu'un? Je pense que oui.
- Oui, c'était la meilleure réponse, mais pourquoi il n'est pas accepté sur Alerte Rejetant la croix bouton
InformationsquelleAutor Rinat

Essayer De Code Ci-Dessous

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

J'ai seulement besoin de la présente partie pour supprimer le contour en chrome: bouton:focus {outline:none;}

InformationsquelleAutor Sandy

13

Ce qui m'arrivait dans google Chrome (mais pas dans Firefox). J'ai trouvé que le outline propriété a été définie par Bootstrap comme outline: 5px auto -webkit-focus-ring-color;. Résolu en remplaçant la outline bien 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;
}
```
InformationsquelleAutor barburakka

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

ensuite sur le bouton deviendra de plus petite taille lorsque l'utilisateur clique dessus.

InformationsquelleAutor Eddy

Essayer cette

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

InformationsquelleAutor Subodh Sharma

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

InformationsquelleAutor Slobodan Kovacevic

3

Vous devez utiliser l'imbrication correcte et ensuite appliquer des styles à elle.
- Clic droit sur le bouton et de trouver exactement la même classe de nidification pour de l'aide (Inspecter l'élément à l'aide de firebug pour firefox), (inspecter l'élément de chrome).
- Ajouter du style à l'ensemble tas de classe. Alors seulement, il serait de travailler
InformationsquelleAutor Orahmax
3

J'ai trouvé cela très utile dans mon cas, après le clic sur le bouton.
```
$('#buttonId').blur();
```
InformationsquelleAutor Danny Cullen
3

J'ai opté pour simplement supprimer la largeur de la bordure sur :focus. Cela supprime le laid espace entre le contour et le bouton de coins arrondis. Pour quelque raison que ce problème n'arrive que sur la réelle bouton d'éléments, et pas <a class="btn"> éléments.
```
button.btn:focus {
  border-width: 0;
}
```
InformationsquelleAutor Jason

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

JS:

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

CSS:

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

HTML:

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

InformationsquelleAutor Gaby Evangelista

Voici mon Bootstrap 4 solution pour supprimer le bouton aperçu

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

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

InformationsquelleAutor 0x1ad2

J'ai juste eu le même problème et suivants du code a fonctionné pour moi:

CSS:

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

.btn {
  margin:32px;
}

HTML:

<!-- 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 aide!

contour! doh!! bruit

InformationsquelleAutor paul

2
```
a:focus {
  outline: none;
}
```
cela fonctionne pour moi sur BS3

InformationsquelleAutor Alex LH
2

Ce a travaillé pour moi dans le Bootstrap 4:

.btn {border-color: transparent;}

InformationsquelleAutor Steffo Dimfelt
2

Effectivement dans le bootstrap est défini toutes les variables pour tous les cas. Dans votre cas vous avez juste à remplacer par défaut de la variable "$input-btn-focus-box-shadow' de '_variables.scss fichier. Comme suit:
$input-btn-focus-box-shadow: none;
Notez que vous devez remplacer cette variable dans votre propre personnalisé '_yourCusomVarsFile.scss'. Et ce fichier doit être importer dans le projet de premier ordre et le bootstrap comme suit:
```
@import "yourCusomVarsFile";
@import "bootstrap/scss/bootstrap";
@import "someOther";
```
La force du poignet vars va avec drapeau"!par défaut".
```
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
```
Dans votre fichier, vous devrez remplacer les valeurs par défaut.
Voici l'illustration:
```
$input-focus-box-shadow: none;
$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
```
La première var ont plus de priorité, puis la deuxième. C'est la même pour le reste des états et des cas.
Espérons qu'il saura vous aider.

Ici est " _variable.scss " fichier de pensions, où vous pouvez trouver toutes les initiales des valeurs de bootstrap: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

Chears

InformationsquelleAutor Tsurule Vol
1

Gardez à l'esprit, si vous êtes bouton est à l'intérieur de l'ancre comme:
```
<a href='some_link'>
    <button class='btn'>Button</button>
</a>
```
Ajoutant le style du bouton lui-même peut ne pas être suffisant, vous devrez peut-être ajouter le a:focus, a:active { outline: none } règles CSS le cas échéant (ce qui a fonctionné pour moi).

InformationsquelleAutor RyanT

Essayer de le ci-dessous

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

InformationsquelleAutor Iryna Koshynska

1

Parfois {outline: 0} ne résout pas le problème et on peut essayer {box-shadow: none;}

InformationsquelleAutor xhunter
1

Je suis en utilisant bootstrap 4, vous pouvez utiliser le 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-sol, box-shadow est assez.
```
#buttonId {
     box-shadow: none;
}
```
Exemple: https://codepen.io/techednelson/pen/XRwgRB

InformationsquelleAutor webtechnelson
1

Si vous utilisez la version 4.3 ou supérieur, votre code ne fonctionnera pas correctement.
C'est ce que j'ai utilisé. Il a travaillé pour moi.
```
.btn:focus, .btn:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}
```
- Vous avez raison. Il ne fonctionne pas sans -webkit-box-shadow: none !important; ligne.
InformationsquelleAutor Vaibhav Singh
1

Au lieu de la cible sur le bouton de classe (.btn), ici, je cible à bouton élément lui-même et il fonctionne pour moi.
```
        button:focus {
          outline:none !important;
          box-shadow:none !important;
        }
```
Et peut utiliser shadow-none classe pour le champ de saisie

InformationsquelleAutor Nawaraj

Essayer

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

InformationsquelleAutor Punitkumar Kulli

0

Voici une non-méthode CSS. À l'aide de JQuery, il suffit de retirer le "focus" de la classe à chaque fois que l'élément est cliqué.

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

Cette méthode peut provoquer la frontière de flash dans l'existence, puis revenir en arrière brièvement, ce qui n'a pas l'air mauvais à mon avis (il ressemble à une partie de la réponse lorsque le bouton est cliqué).

La raison que j'ai utilisé .mousemove() est que .cliquez sur() et .mouseup() les deux s'est révélée inefficace.
- néh. ajouter plus de javascript pour vaincre le CSS n'est pas le meilleur de pratiques. À mon humble avis.
InformationsquelleAutor Wesley Kelly

La modification de 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*/;
}

Il conserve l'ombre de la touche, il ne change la couleur du bouton de la souris.

InformationsquelleAutor Ivan Aldwin A. Cristobal

Remplacer l'exacte bootstrap états:

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

InformationsquelleAutor ZEF

-1

très simple :
```
.btn {outline: none;}
```
InformationsquelleAutor Saurabh Mistry

Vous devez vous connecter pour publier un commentaire.