Enlever la bordure bleue du bouton css custom-styled dans Chrome

attendez! Il y a une raison à ce vilain contour!

avant d'enlever ce contour bleu laid, vous pouvez prendre en considération accessibilité . Par défaut, ce contour bleu est placé sur les éléments focalisables. Cela permet aux utilisateurs qui ont des problèmes d'accessibilité de se concentrer sur ce bouton en le tabulant. Certains utilisateurs n'ont pas les capacités motrices pour utiliser une souris et doivent utiliser seulement le clavier (ou un autre dispositif d'entrée) pour l'interaction avec l'ordinateur. Lorsque vous supprimez le contour bleu, il n'est plus un indicateur visuel sur quel élément est concentré. Si vous allez supprimer le contour bleu, vous devrait remplacer par un autre type d'indication visuelle que le bouton est concentré.

Solution Possible: assombrir les boutons lors de la mise au point

pour les exemples ci-dessous, le contour bleu de Chrome a d'abord été enlevé par en utilisant button:focus { outline:0 !important; }

voici vos boutons de Bootstrap de base comme ils apparaissent normalement:

Voici les boutons quand ils reçoivent la mise au point:

Voici les boutons quand ils sont pressés:

comme vous pouvez le voir, les boutons sont un peu plus foncés quand ils reçoivent la mise au point. Personnellement, je recommande de faire les boutons focalisés même plus sombre de sorte qu'il ya une différence très perceptible 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 peut aider à créer une expérience plus productive dans votre site web. Il y a beaucoup d'utilisateurs normaux qui utilisent des commandes de clavier pour naviguer dans les sites Web afin de garder les mains sur le clavier.

je viens de supprimer le contour de toutes les balises de la page, en sélectionnant tous et en appliquant outline:none pour tout:)

*:focus {outline:none}

Comme bagofcole mentionné, vous pourriez avoir besoin d'ajouter !important aussi, donc le style ressemblera à ceci:

*:focus {outline:none !important}

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

button:focus {outline:0 !important;}

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

dans mon cas de ce problème j'ai dû spécifier box-shadow: none

button:focus {
  text-decoration: none;
  outline:none;
  border: none;
  box-shadow: none;
}

ajoutez ceci dans votre fichier CSS.

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

utiliser l'un ou l'autre:

:active {
    outline:none;
}

ou ceci si cela ne fonctionne pas:

:active {
   outline:none !important;
}

cela fonctionne pour moi (FF et Chrome, au moins). Au lieu de cibler l'état :focus , il suffit de cibler l'état :active et cela supprimera la mise en évidence esthétique dans votre navigateur lorsqu'un utilisateur clique sur un lien. Mais il conservera les états de mise au point quand un utilisateur avec des onglets handicapés ou des onglets majuscules à travers une page. Les deux parties sont heureux. :)

pour toute personne utilisant Bootstrap et ayant ce problème, ils utilisent: active: focus ainsi que juste: active et: focus donc vous aurez besoin de:

element:active:focus {
    outline: 0;
}

avec un peu de chance, j'ai sauvé quelqu'un un peu de temps en pensant que celui-là, je me suis cogné la tête en me demandant pourquoi une chose aussi simple ne fonctionnait pas.

C'est ce qui a fonctionné pour moi:

button:focus {
    box-shadow:none;
}

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

*{
outline: none;
}

ou

*{
outline-style: none;
}

Si vous souhaitez supprimer même effet dans l'entrée, vous pouvez ajouter le code suivant ainsi que les boutons.

input:focus {outline:0;}

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:

Jusqu'à ce que tous les navigateurs modernes vont commencer à prendre en charge CSS-selecteur : focus-visible ,

le plus simple et peut-être le meilleur moyen de save accessibility est de supprimer ce point délicat seulement pour les utilisateurs de souris et de l'enregistrer pour les utilisateurs de clavier :

1.Utilisez ce petit polyfill (environ 10kb): 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;
}

navigateur-prise en charge du css4-sélecteur: focus-visible en ce moment très faible:

https://caniuse.com/#search=focus-visible

Supprimer outline est terrible pour l'accessibilité! Idéalement, l'anneau de mise au point apparaît seulement lorsque l'utilisateur a l'intention d'utiliser le clavier .

Use : focus-visible . Il s'agit actuellement d'une proposition du W3C pour la mise au point d'un clavier à l'aide de CSS. Jusqu'à ce que les principaux navigateurs le prennent en charge, vous pouvez utiliser ce robuste polyfill .

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

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

j'ai aussi écrit un plus détaillé post juste au cas où vous avez besoin de plus d'infos.

Ecrivez simplement outline:none; . Pas besoin d'utiliser un pseudo-élément focus