Supprimer la bordure bleue du bouton de style personnalisé CSS dans Chrome

Je travaille sur une page Web et je souhaite des <button>balises de style personnalisé . Donc , avec CSS, je l' ai dit: border: none. Maintenant, cela fonctionne parfaitement en safari, mais en chrome, lorsque je clique sur l'un des boutons, il met une bordure bleue agaçante autour de lui. Je pensais button:active { outline: none }ou button:focus { outline:none }travaillerais, mais ni l'un ni l'autre. Des idées?

Voici à quoi cela ressemble avant d'être cliqué (et à quoi je veux qu'il ressemble toujours après avoir été cliqué):

Et c'est la frontière dont je parle:

Voici mon CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

Cette opération n'est pas recommandée car elle régresse l' accessibilité de votre site; pour plus d'informations, consultez cet article .

Cela dit, si vous insistez, ce CSS devrait fonctionner:

button:focus {outline:0;}

Découvrez-le ou JSFiddle: http://jsfiddle.net/u4pXu/

Ou dans cet extrait:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Attendre! Il y a une raison pour ce contour laid!

Avant de supprimer ce contour bleu laid, vous voudrez peut-être prendre en compte l' accessibilité . Par défaut, ce contour bleu est placé sur les éléments pouvant être mis au point. Cela permet aux utilisateurs ayant des problèmes d'accessibilité de concentrer ce bouton en le tabulant. Certains utilisateurs n'ont pas la motricité pour utiliser une souris et doivent utiliser uniquement le clavier (ou un autre périphérique d'entrée) pour l'interaction avec l'ordinateur. Lorsque vous supprimez le contour bleu, il n'y a plus d'indicateur visuel sur l'élément mis au point. Si vous allez enlever le contour bleu, vous devez le remplacer par un autre type d'indication visuelle que le bouton se concentre.

Solution possible: assombrir les boutons une fois mis au point

Pour les exemples ci-dessous, le contour bleu de Chrome a d'abord été supprimé à l'aide de button:focus { outline:0 !important; }

Voici vos boutons de base Bootstrap tels qu'ils apparaissent normalement:

Voici les boutons lorsqu'ils reçoivent le focus:

Voici les boutons quand ils sont pressés:

Comme vous pouvez le voir, les boutons sont un peu plus sombres lorsqu'ils reçoivent la mise au point. Personnellement, je recommanderais de rendre les boutons focalisés encore plus sombres afin qu'il y ait une différence très notable entre l'état focalisé et l'état normal du bouton.

Ce n'est pas seulement pour les utilisateurs handicapés

Rendre votre site plus accessible est quelque chose qui est souvent négligé mais qui peut aider à créer une expérience plus productive dans votre site Web. Il existe de nombreux utilisateurs normaux qui utilisent les commandes du clavier pour naviguer sur les sites Web afin de garder les mains sur le clavier.

Je supprime simplement le contour de toutes les balises de la page en sélectionnant tout et en appliquant le contour: aucun à tout :)

*:focus {outline:none}

Comme bagofcole l'a mentionné, vous devrez peut-être ajouter! Important aussi, donc le style ressemblera à ceci:

*:focus {outline:none !important}

Dans mon exemple de ce problème, j'ai dû spécifier box-shadow: none

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

N'oubliez pas la !importantdéclaration, pour un meilleur résultat

button:focus {outline:0 !important;}

Une règle qui a la propriété! Important sera toujours appliquée, peu importe où cette règle apparaît dans le document CSS.

La suppression outlineest terrible pour l'accessibilité! Idéalement, la bague de mise au point n'apparaît que lorsque l'utilisateur a l' intention d'utiliser le clavier .

Utilisation : focus visible . Il s'agit actuellement d'une proposition du W3C pour styliser le focus clavier uniquement à l'aide de CSS, et est prise en charge dans Firefox ( caniuse ). Jusqu'à ce que d'autres navigateurs principaux le prennent en charge, vous pouvez utiliser ce polyfill robuste .

/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}

J'ai également écrit un article plus détaillé au cas où vous auriez besoin de plus d'informations.

Ajoutez ceci dans votre fichier CSS.

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

Utilisez soit ceci:

:active {
    outline:none;
}

ou ceci si ça ne marche pas:

:active {
   outline:none !important;
}

Cela fonctionne pour moi (FF et Chrome, au moins). Au lieu de cibler l' :focusétat, ciblez simplement l' :activeétat et cela supprimera la surbrillance esthétiquement envahissante dans votre navigateur lorsqu'un utilisateur clique sur un lien. Mais il conservera toujours les états de focus lorsqu'un utilisateur avec des onglets handicapés ou des onglets de décalage dans une page. Les deux parties sont heureuses. :)

pour ce problème:

utilisez ceci:

   *{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

résultat:

Pour toute personne utilisant Bootstrap et ayant ce problème, elle utilise: active: focus ainsi que simplement: active et: focus, vous aurez donc besoin de:

element:active:focus {
    outline: 0;
}

Avec un peu de chance, j'ai gagné du temps à quelqu'un pour comprendre celui-là, je me suis cogné la tête un peu en me demandant pourquoi une chose aussi simple ne fonctionnait pas.

La plupart des solutions ne fonctionneront pas si vous utilisez Bootstrap 4.1 et éventuellement d'autres versions. Après beaucoup de coups, j'ai découvert que vous devez appliquer la classe shadow-none :

<button class="btn shadow-none">Bootstrap (4.1) button without shadow</button>

C'est ce qui a fonctionné pour moi:

button:focus {
    box-shadow:none;
}

Le correctif pour Chrome et autres navigateurs

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

essayez ce code pour tous les éléments qui ont un problème de bordure bleue

*{
outline: none;
}

ou

*{
outline-style: none;
}

Une autre façon de résoudre le problème d'accessibilité qui n'a pas encore été mentionné ici est d'utiliser un peu de Javascript . Les crédits vont à cet article de blog perspicace de hackernoon: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2

L'approche ici est vraiment simple mais efficace: ajouter une classe lorsque les gens commencent à utiliser la touche de tabulation pour naviguer dans la page (et éventuellement la supprimer lorsque vous passez à nouveau à la souris. Ensuite, vous pouvez utiliser cette classe pour afficher un contour de focus ou non .

function handleFirstTab(e) {
    if (e.keyCode === 9) { // the "I am a keyboard user" key
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', handleFirstTab);
    }
}

window.addEventListener('keydown', handleFirstTab);

J'ai rencontré le même problème, j'ai donc utilisé de simples CSS-

.custom-button {
    outline: none
}

Si vous souhaitez supprimer le même effet en entrée, vous pouvez ajouter le code suivant ainsi que le bouton.

input:focus {outline:0;}

Jusqu'à ce que tous les navigateurs modernes commencent à prendre en charge css-selector : focus-visible , le moyen
le plus simple et peut-être le meilleur pour enregistrer l'accessibilité est de supprimer ce focus délicat uniquement pour les utilisateurs de souris et de le sauvegarder pour les utilisateurs de clavier :

1.Utilisez ce petit polyfill (environ 10 Ko): https://github.com/WICG/focus-visible
2.Ajouter le code suivant quelque part dans votre CSS:

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

Prise en charge du navigateur de css4-selector: focus-visible en ce moment très faible:
https://caniuse.com/#search=focus-visible

Écrivez simplement outline:none;. Pas besoin d'utiliser un pseudo-élémentfocus

Il s'agit d'un problème dans la famille Chrome et il existe depuis toujours.

Un bug a été déclenché https://bugs.chromium.org/p/chromium/issues/detail?id=904208

Il peut être affiché ici: https://codepen.io/anon/pen/Jedvwj dès que vous ajoutez une bordure à quelque chose comme un bouton (par exemple, role = "button" a été ajouté à une balise par exemple) Chrome gâche et définit l'état de mise au point lorsque vous cliquez avec votre souris.

Je recommande fortement d'utiliser ce correctif: https://github.com/wicg/focus-visible .

Faites simplement ce qui suit

npm install --save focus-visible

Ajoutez le script à votre html:

<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>

ou importez dans votre fichier d'entrée principal si vous utilisez webpack ou quelque chose de similaire:

import 'focus-visible/dist/focus-visible.min';

puis mettez ceci dans votre fichier css:

// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}

Vous pouvez simplement définir:

button:focus {outline:0;}

mais si vous avez un grand nombre d'utilisateurs, vous défavorisez ceux qui ne peuvent pas utiliser de souris ou ceux qui veulent simplement utiliser leur clavier pour la vitesse.

J'ai eu le même problème avec le bootstrap. J'ai résolu à la fois le contour et l'ombre de la boîte

.btn:focus, .btn.focus {
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 123, 255, 0) !important; // or none
}