Mes boutons ont tous une surbrillance autour d'eux après avoir cliqué dessus. C'est dans Chrome.

<button class="btn btn-primary btn-block">
    <span class="icon-plus"></span> Add Page
</button>

J'utilise Bootstrap avec un thème, mais je suis sûr que ce n'est pas ça: je l'avais remarqué auparavant sur un autre projet.

Cela disparaît si j'utilise une <a>balise à la place de <button>. Pourquoi? Si je voulais utiliser <button>comment le faire disparaître?

J'ai trouvé ces questions et réponses sur une autre page, et remplacer le style de mise au point des boutons a fonctionné pour moi. Ce problème peut être spécifique à MacOS avec Chrome.

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

Notez cependant que cela a des implications pour l'accessibilité et n'est pas conseillé jusqu'à ce que vous ayez un bon état de focus cohérent pour vos boutons et entrées. Selon les commentaires ci-dessous, il y a des utilisateurs qui ne peuvent pas utiliser de souris.

Vous voulez quelque chose comme:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

La méthode .blur () supprime correctement la mise en évidence du focus et ne gâche pas les styles de Bootstraps.

ma compréhension est que le focus est d'abord appliqué après l' onMouseDownévénement, donc appelere.preventDefault() à onMouseDownpeut - être une solution propre en fonction de vos besoins. Il s'agit certainement d'une solution conviviale pour l'accessibilité, mais elle ajuste évidemment le comportement des clics de souris qui peuvent ne pas être compatibles avec votre projet Web.

J'utilise actuellement cette solution (dans un react-bootstrapprojet) et je ne reçois pas de scintillement de focus ou de focus conservé de boutons après un clic, mais je suis toujours en mesure de tabuler mon focus et de visualiser visuellement le focus des mêmes boutons.

Je ne peux pas croire que personne n'ait encore posté cela.

Utilisez une étiquette au lieu d'un bouton.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Violon

Bien qu'il soit facile de simplement supprimer le contour de tous les boutons focalisés (comme dans la réponse de user1933897 ), mais cette solution est mauvaise du point de vue de l'accessibilité (par exemple, voir Arrêter de jouer avec le contour de focus par défaut du navigateur )

D'un autre côté, il est probablement impossible de convaincre votre navigateur d'arrêter de styliser votre bouton cliqué comme s'il se pense qu'il est concentré après avoir cliqué dessus (je vous regarde, Chrome sur OS X).

Alors, que pouvons-nous faire? Quelques options me viennent à l'esprit.

1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })

Vous demandez à votre navigateur de supprimer le focus autour de n'importe quel bouton immédiatement après avoir cliqué sur le bouton. En utilisant mouseupau lieu de clicknous gardons le comportement par défaut pour les interactions basées sur le clavier ( mouseupne se déclenche pas par le clavier).

2) CSS: .btn:hover { outline: 0 !important }

Ici, vous désactivez le contour pour les boutons survolés uniquement. Évidemment, ce n'est pas idéal, mais peut suffire dans certaines situations.

Cela a fonctionné pour moi. J'ai créé une classe personnalisée qui remplace le CSS nécessaire.

.custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

-Webkit-box-shadow fonctionnera pour les navigateurs Chrome et safari.

Cela fonctionne pour moi, une autre solution non mentionnée. Il suffit de le jeter dans l'événement click ...

$(this).trigger("blur");

Ou appelez-le à partir d'un autre événement / méthode ...

$(".btn_name").trigger("blur");

Si vous utilisez la règle :focus { outline: none; }pour supprimer les contours, le lien ou le contrôle sera focalisable mais sans indication de focus pour les utilisateurs du clavier. Les méthodes pour le supprimer, telles que JS, onfocus="blur()"sont encore pires et empêcheront les utilisateurs du clavier d'interagir avec le contrôle.

Les hacks que vous pouvez utiliser, qui sont en quelque sorte OK , incluent l'ajout de :focus { outline: none; }règles lorsque les utilisateurs interagissent avec la souris et les supprimer à nouveau si une interaction avec le clavier est détectée. Lindsay Evans a fait une lib pour cela: https://github.com/lindsayevans/outline.js

Mais je préférerais définir une classe sur la balise html ou body. Et contrôlez dans le fichier CSS quand l'utiliser.

Par exemple (les gestionnaires d'événements en ligne sont uniquement à des fins de démonstration):

<html>
<head>
<style>
  a:focus, button:focus {
    outline: 3px solid #000;
  }
  .no-focus a, .no-focus button {
    outline: none;
  } 
</style>
</head>
<body id="thebody" 
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
    <p>This her is <a href="#">a link</a></p>   
    <button>Click me</button>
</body>
</html>

J'ai mis un stylo: http://codepen.io/snobojohan/pen/RWXXmp

Mais attention, il y a des problèmes de performances. Cela oblige à repeindre chaque fois que l'utilisateur bascule entre la souris et le clavier. En savoir plus sur la façon d'éviter les peintures inutiles http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/

J'ai remarqué la même chose et même si cela m'énerve vraiment, je pense qu'il n'y a pas de bonne façon de gérer cela.

Je recommanderais contre toutes les autres solutions données car elles tuent complètement l'accessibilité du bouton, alors maintenant, lorsque vous cliquez sur le bouton, vous n'obtiendrez pas la concentration attendue.

Cela devrait être évité!

.btn:focus {
  outline: none;
}

Je trouve une solution. lorsque nous nous concentrons, le bootstrap utilise box-shadow, nous le désactivons donc (pas assez de réputation, impossible de télécharger l'image :().

J'ajoute

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

Ça marche.

OPTION 1: utilisez la :focus-visiblepseudo-classe

La :focus-visiblepseudo-classe peut être utilisée pour éliminer les contours disgracieux et concentrer les anneaux sur les boutons et divers éléments pour les utilisateurs qui ne naviguent PAS via le clavier (c'est-à-dire via le toucher ou le clic de la souris).

/** 
 * The default focus style is likely provided by Bootstrap or the browser
 * but here we override everything else with a visually appealing cross-
 * browser solution that works well on all focusable page elements
 * including buttons, links, inputs, textareas, and selects.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff, /* use site bg color to create whitespace for faux focus ring */
    0 0 0 .35rem #069 !important; /* faux focus ring color */
}

/**
 * Undo the above focused button styles when the element received focus
 * via mouse click or touch, but not keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Avertissement: à partir de 2020, la :focus-visiblepseudo-classe n'est pas largement prise en charge par les navigateurs . Cependant, le polyfill est très facile à utiliser; voir les instructions ci-dessous.

OPTION 2: utilisez le .focus-visiblepolyfill

Cette solution utilise une classe CSS normale au lieu de la pseudo-classe mentionnée ci-dessus, et prend en charge un large navigateur car il s'agit d' un polyfill officiel basé sur Javascript .

Étape 1: ajoutez les dépendances Javascript à votre page HTML

Remarque: le polyfill visible sur le focus nécessite un polyfill supplémentaire pour plusieurs navigateurs plus anciens qui ne prennent pas en charge classList :

<!-- place this code just before the closing </html> tag -->
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList"></script>
<script src="https://unpkg.com/focus-visible"></script>

Étape 2: ajoutez le CSS suivant à votre feuille de style

Ce qui suit est une version modifiée de la solution CSS documentée plus en détail ci-dessus.

/**
 * Custom cross-browser styles for keyboard :focus overrides defaults.
 */
*:focus { 
  outline: 0 !important;
  box-shadow:
    0 0 0 .2rem #fff,
    0 0 0 .35rem #069 !important;
}

/**
 * Remove focus styles for non-keyboard :focus.
 */
*:focus:not(.focus-visible) {
  outline: 0 !important;
  box-shadow: none !important;
}

Étape 3 (facultative): utilisez la classe «focus-visible» si nécessaire

Si vous avez des éléments où vous souhaitez réellement afficher la bague de mise au point lorsque quelqu'un clique ou utilise tactile, ajoutez simplement la focus-visibleclasse à l'élément DOM.

<!-- This example uses Bootstrap classes to theme a button to appear like
     a regular link, and then add a focus ring when the link is clicked --->
<button type="button" class="btn btn-text focus-visible">
  Clicking me shows a focus box
</button>

Ressource:

• https://css-tricks.com/keyboard-only-focus-styles/

Démo:

• https://wicg.github.io/focus-visible/demo/

Si ce qui précède ne fonctionne pas pour vous, essayez ceci:

.btn: focus {contour: none; box-shadow: none; border: 2px solid transparent;}

Comme l'a souligné user1933897, cela peut être spécifique à MacOS avec Chrome.

Tard, mais qui sait que cela peut aider quelqu'un. Le CSS ressemblerait à:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

Le HTML ressemblerait à:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

De cette façon, vous pouvez conserver btn et ses comportements associés.

Je l'ai mentionné dans un commentaire ci-dessus, mais cela vaut la peine d'être répertorié comme une réponse distincte pour plus de clarté. Tant que vous n'avez pas besoin d'avoir le focus sur le bouton, vous pouvez utiliser l'événement focus pour le supprimer avant de pouvoir appliquer des effets CSS:

$('buttonSelector').focus(function(event) {
    event.target.blur();
});

Cela évite le scintillement visible lors de l'utilisation de l'événement click. Cela restreint l'interface et vous ne pourrez pas taper sur le bouton, mais ce n'est pas un problème dans toutes les applications.

Style

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

En utilisant

<button class="btn btn-primary not-focusable">My Button</button>

Essayez cette solution pour supprimer la bordure autour du bouton. Ajoutez ce code dans css.

Essayer

button:focus{
outline:0px;
}

Si cela ne fonctionne pas, utilisez ci-dessous.

button:focus{
 outline:none !important;
 }

Pour les personnes souhaitant une méthode CSS pure et simple:

:focus:not(:focus-visible) { outline: none }

Cela pourrait également fonctionner pour le lien et ainsi de suite, et en bonus, il conserve les accessibilités du clavier. Enfin, il est ignoré par les navigateurs qui ne prennent pas en charge: focus-visible

Nous souffrions d'un problème similaire et avons remarqué que Bootstrap 3 n'a pas le problème sur leurs onglets (dans Chrome). Il semble qu'ils utilisent un style de contour qui permet au navigateur de décider de ce qu'il y a de mieux à faire et Chrome semble faire ce que vous voulez: afficher le contour lorsqu'il est concentré, sauf si vous venez de cliquer sur l'élément.

La prise en charge de outline-styleest difficile à cerner, car le navigateur décide de ce que cela signifie. Mieux vaut vérifier dans quelques navigateurs et avoir une règle de secours.

Une autre solution possible consiste à ajouter une classe à l'aide d'un écouteur Javascript lorsque l'utilisateur clique sur le bouton, puis à supprimer cette classe sur le focus avec un autre écouteur. Cela maintient l'accessibilité (tabulation visible) tout en empêchant le comportement original de Chrome de considérer un bouton concentré lorsqu'il est cliqué.

JS:

$('button').click(function(){
    $(this).addClass('clicked');
});
$('button').focus(function(){
    $(this).removeClass('clicked');
});

CSS:

button:focus {
    outline: 1px dotted #000;
}
button.clicked {
    outline: none;
}

Exemple complet ici: https://jsfiddle.net/4bbb37fh/

C'est du travail, j'espère vous aider

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

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

cela supprime le contour au clic, mais conserve le focus lors de la tabulation (pour a11y)

Cela fonctionne mieux

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

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

ce contour: aucun ne fonctionnera pour le bouton et une balise

Ajoutez ceci en CSS:

*, ::after, ::before {
    box-sizing: border-box;
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

J'ai trouvé une solution en ajoutant simplement la ligne ci-dessous dans votre code CSS.

button:focus { outline: none }

Je viens d'avoir ce même problème sur MacOS et Chrome en utilisant un bouton pour déclencher un événement de "transition". Si quelqu'un qui lit ceci utilise déjà un écouteur d'événements, vous pouvez le résoudre en appelant .blur()après vos actions.

Exemple:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

Bien que si vous n'utilisez pas déjà un écouteur d'événements, en ajouter un juste pour résoudre cela pourrait ajouter des frais généraux inutiles et une solution de style comme les réponses précédentes est meilleure.

Vous pouvez définir tabIndex="-1". Le navigateur ignorera ce bouton lorsque vous effectuez un TAB dans les commandes pouvant être mises au point.

D'autres "correctifs" suggérés ici ne suppriment que le contour du focus, mais laissent toujours les boutons tabulables. Cependant, du point de vue de la convivialité, vous avez déjà supprimé la lueur, de sorte que votre utilisateur ne saura pas quel est le bouton actuellement ciblé, de toute façon.

D'un autre côté, rendre le bouton non tabable a des implications d'accessibilité.

Je l'utilise pour supprimer le contour du focus du bouton X bootstrap modal, qui a un bouton "Fermer" en double en bas de toute façon, donc ma solution n'a aucun impact sur l'accessibilité.

Si vous utilisez un navigateur de kit Web (et potentiellement un navigateur compatible avec le préfixe de fournisseur de kit Web), ce contour appartient à la -webkit-focus-ringpseudoclasse du bouton . Réglez-le simplement outlinesur none:

*:-webkit-focus-ring {
  outline: none;
}

Chrome est un tel navigateur webkit, et cet effet se produit également sur Linux (pas seulement une chose macOS, bien que certains styles Chrome soient uniquement macOS)

J'avais le même problème en utilisant <a>le bouton et j'ai découvert que je manquais une solution de contournement en ajoutant attr, type="button"cela se comporte normalement pour moi au moins.

<a type="button" class="btn btn-primary">Release Me!</a>

directement dans la balise html (dans un scénario où vous voudrez peut-être laisser le thème bootstrap en place ailleurs dans votre conception).

exemples à essayer ..

<button style="border: transparent;">

<button style="border: 1px solid black;">

..ect ,. en fonction de l'effet souhaité.