Comment supprimer le focus autour des boutons au clic
Mes boutons sont tous mis en évidence après que je les ai cliqués. Ceci est en 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 presque sûr que ce n'est pas ça: je l'avais déjà remarqué auparavant sur un autre projet.
Cela disparaît si j'utilise une balise <a> au lieu de <button>. Pourquoi? Si je voulais utiliser <button>, comment pourrais-je le faire disparaître?
J'ai trouvé ce Q et A sur une autre page et le remplacement du style de focus des boutons a fonctionné pour moi. Ce problème peut être spécifique à MacOS avec Chrome.
.btn:focus {
outline: none;
}
Notez cependant que cela a des implications sur l'accessibilité et qu'il n'est pas conseillé de le faire avant d'avoir un bon état de mise au point cohérent pour vos boutons et vos entrées. Selon les commentaires ci-dessous, certains utilisateurs 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 surbrillance et ne perturbe pas les styles de Bootstraps.
si j'ai bien compris, le focus est appliqué pour la première fois après l'événement onMouseDown; appeler e.preventDefault() dans onMouseDown peut donc s'avérer une solution simple, selon vos besoins. C’est certes une solution facile d’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 projet react-bootstrap) et je ne reçois pas de scintillement de focus ni de focus retenu sur les boutons après un clic, mais je suis toujours en mesure de gérer mon focus et de visualiser le focus des mêmes boutons.
Bien qu'il soit facile de supprimer simplement le contour de tous les boutons ciblés (comme dans answer de user1933897), cette solution est mauvaise du point de vue de l'accessibilité (par exemple, voir Arrêtez de jouer avec le plan de focus par défaut du navigateur )
D'un autre côté, il est probablement impossible de convaincre votre navigateur d'arrêter de styler votre bouton cliqué de manière ciblée s'il pense le faire une fois que vous avez cliqué dessus (je vous regarde, Chrome sous 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 d’un bouton immédiatement après avoir cliqué sur le bouton. En utilisant mouseup au lieu de click, nous conservons le comportement par défaut pour les interactions au clavier (mouseup n'est pas déclenché 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 cela peut être suffisant dans certaines situations.
Je ne peux pas croire que personne n'a encore posté ceci.
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>
Cela fonctionne pour moi, une autre solution non mentionnée. Il suffit de le lancer dans l'événement click ...
$(this).trigger("blur");
Ou appelez-le depuis un autre événement/une autre 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 activable, mais sans indication d'activation pour les utilisateurs du clavier. Les méthodes pour le supprimer telles que JS telles que onfocus="blur()" sont encore pires et empêcheront les utilisateurs de clavier d'interagir avec le contrôle.
Les hacks que vous pouvez utiliser, qui sont sort OK, incluent l’ajout de règles :focus { outline: none; } lorsque les utilisateurs interagissent avec la souris et les suppriment à nouveau si une interaction clavier est détectée. Lindsay Evans a fait une librairie pour cela: https://github.com/lindsayevans/outline.js
Mais je préférerais définir une classe sur les balises html ou body. Et avoir le contrôle dans le fichier CSS du moment où utiliser ceci.
Par exemple (les gestionnaires d’événements en ligne servent 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 prévention des peintures inutiles http://www.html5rocks.com/fr/tutorials/speed/unnecessary-paints/
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.
J'ai remarqué la même chose et même si cela m'agace vraiment, je pense qu'il n'y a pas de manière appropriée de gérer cela.
Je recommande contre toutes les autres solutions proposées, car elles nuisent complètement à l'accessibilité du bouton. Désormais, lorsque vous accédez au bouton, vous n'obtenez pas le focus attendu.
Cela devrait être évité!
.btn:focus {
outline: none;
}
Style
.not-focusable:focus {
outline: none;
box-shadow: none;
}
En utilisant
<button class="btn btn-primary not-focusable">My Button</button>
Tard, mais qui sait peut aider quelqu'un. Le CSS ressemblerait à ceci:
.rhighlight{
outline: none !important;
box-shadow:none
}
Le HTML ressemblerait à ceci:
<button type="button" class="btn btn-primary rHighlight">Text</button>
De cette façon, vous pouvez garder btn et ses comportements associés.
Je l'ai mentionné dans un commentaire ci-dessus, mais sa pertinence en tant que réponse distincte mérite d'être énumérée. Tant que vous n'avez pas besoin de vous concentrer 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 passer au bouton, mais ce n'est pas un problème dans toutes les applications.
Essayez cette solution pour supprimer la bordure autour du bouton. Ajoutez ce code en css.
Essayez
button:focus{
outline:0px;
}
Si ne fonctionne pas, utilisez ci-dessous.
button:focus{
outline:none !important;
}
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 active avec un autre écouteur. Cela permet de maintenir l'accessibilité (tabulation visible) tout en empêchant le comportement original de Chrome de considérer un bouton activé lorsque l'utilisateur clique dessus.
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/
Nous avons eu un problème similaire et nous avons remarqué que Bootstrap 3 N’a pas le problème sur ses onglets (dans Chrome). On dirait qu'ils utilisent outline-style , ce qui permet au navigateur de décider ce qu'il convient de faire et Chrome semble faire ce que vous voulez: affichez le contour lorsqu'il est activé, sauf si vous cliquez sur l'élément.
La prise en charge de outline-style est difficile à cerner puisque le navigateur doit décider de ce que cela signifie. Il est préférable d’archiver quelques navigateurs et d’avoir une règle de repli.
Si ce qui précède ne fonctionne pas pour vous, essayez ceci:
.btn: focus {contour: none; box-shadow: none; frontière: solide 2px transparent;}
Comme l’a signalé l’utilisateur 1933897, cela pourrait être spécifique à MacOS avec Chrome.
C'est du travail, j'espère vous aider
.btn:focus, .btn:focus:active {
outline: none;
}
Pour les personnes désirant un moyen purement CSS de le faire:
:focus:not(:focus-visible) { outline: none }
Cela pourrait également fonctionner pour link, etc., et, en plus, garder les accessibilités du clavier. Enfin, il est ignoré par les navigateurs qui ne prennent pas en charge: focus-visible
Cela fonctionne mieux
.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}
Je trouve une solution . Lorsque nous nous concentrons, bootstrap utilise box-shadow, nous la désactivons donc (réputation insuffisante, impossible de télécharger une image :().
J'ajoute
btn:focus{
box-shadow:none !important;
}
Ça marche.
.btn:focus,.btn:active, a{
outline: none !important;
box-shadow: none;
}
ce contour: aucun ne fonctionnera pour les deux boutons et une balise
.btn:focus:active {
outline: none;
}
cela supprime le contour au clic, mais conserve le focus lors de la tabulation
Si vous ne voulez pas le contour pour le bouton avec tout le statut, vous pouvez remplacer le css avec le code ci-dessous
.btn.active.focus, .btn.active:focus,
.btn.focus, .btn:active.focus,
.btn:active:focus, .btn:focus{
outline: none;
}
Vous pouvez définir tabIndex="-1". Cela obligera le navigateur à ignorer ce bouton lorsque vous parcourez les contrôles permettant la mise au point.
Les autres "corrections" suggérées ici ne suppriment que le contour de la mise au point, tout en laissant les boutons tabulables. Toutefois, du point de vue de la convivialité, vous avez déjà supprimé la lueur, afin que votre utilisateur ne sache pas quel bouton est actuellement activé, de quelque manière que ce soit.
D'autre part, rendre un bouton non tabable a des implications en termes d'accessibilité.
Je l'utilise pour supprimer le contour de la mise au point du bouton X dans bootstrap modal, qui comporte un bouton "Fermer" en double en bas, de sorte que ma solution n'a aucun impact sur l'accessibilité.
Si vous utilisez un navigateur Webkit (et éventuellement un navigateur compatible avec le préfixe du fournisseur Webkit), cet aperçu appartient à la pseudoclasse -webkit-focus-ring du bouton. Définissez simplement outline sur none:
*:-webkit-focus-ring {
outline: none;
}
Chrome est un navigateur Webkit de ce type, et cet effet se produit également sous Linux (pas seulement un problème macOS, bien que certains styles de Chrome soient macOS uniquement)
Pour les développeurs AngularJS que j'utilise depuis la solution:
var element = $window.document.getElementById("export-button");
if (element){
element.blur();
}
N'oubliez pas d'injecter $ window.
Je viens d'avoir ce même problème sur MacOS et Chrome tout en utilisant un bouton pour déclencher un événement "transition". Si quelqu'un qui lit ceci utilise déjà un écouteur d'événement, 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();
});
Cependant, si vous n'utilisez pas déjà un écouteur d'événements, en ajouter un juste pour résoudre ce problème risque d'ajouter une surcharge inutile et une solution de style comme celle fournie par les réponses précédentes est préférable.
J'avais le même problème en utilisant <a> en tant que bouton et j'ai découvert Je manquais une solution de contournement en ajoutant attr type="button" le fait se comporter normalement pour moi au moins.
<a type="button" class="btn btn-primary">Release Me!</a>
directement dans une balise html (dans le cas où vous voudriez 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 désiré.
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;
}