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


812

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:

entrez la description de l'image ici

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


Je ne sais pas pourquoi cela fonctionne dans votre démo .. Il le fait ici: jsfiddle.net/NgL8H @davidpauljunior
eshellborn

5
J'ai ajouté la règle de focus au bas qui, selon vous, ne fonctionnait pas, mais elle semble: jsfiddle.net/NgL8H/1
davidpauljunior

21
Vous ne devez pas supprimer complètement le contour - ceux qui ont un handicap - et ceux comme moi qui utilisent souvent le clavier parce qu'il est rapide - en ont besoin pour naviguer. Il serait beaucoup mieux de remodeler le contour en quelque chose que vous aimez.
Chris B

3
Veuillez ne pas définir outline: nonecomme ceci, sauf si vous êtes prêt à remplacer la perte d'accessibilité. Voir ce site: outlinenone.com
Flimm

Réponses:


1537

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>


49
Cela ne devrait-il pas réellement être outline: none;ou n'est-ce pas important?
henrywright

2
@henrywright Eh bien, le PO a essayé cela et n'a pas fonctionné pour lui.
diosney

58
Veuillez ne jamais faire ça. Votre grief mineur n'est pas pertinent pour le problème d'accessibilité massif que cela devient
phazei

20
Vous devriez certainement remodeler cela au lieu de le cacher complètement. Dans ce cas, essayez quelque chose comme button:focus{ outline-color: #A75000 }… au lieu de masquer l'indicateur, vous le changez en orange foncé qui correspond au style.
cloudworks

3
@ SeanO'Brien a admis que la situation donnée par le PO pourrait être pour un site qui a 5 utilisateurs, tous valides. Mais probablement la majorité des 1123 personnes qui ont voté en faveur de cela pensent que c'est la bonne façon de faire les choses pour leur situation donnée, mais en réalité ce n'est pas car c'est discriminatoire.
alexrogers

296

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: Boutons d'amorçage à l'état normal

Voici les boutons lorsqu'ils reçoivent le focus: Boutons Bootstrap en état focalisé

Voici les boutons quand ils sont pressés: entrez la description de l'image ici

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.


40
Le problème est dans Chrome, il se produit même sur un clic plutôt que sur un simple tabulation (l'implémentation logique trouvée dans la plupart des navigateurs). Donc, en réalité, Google réduit l'accessibilité car la plupart des développeurs désactiveront simplement cette option (dans Chrome) Plus de temps perdu à rechercher / résoudre les problèmes liés à Google / Chrome (enregistrement de mot de passe, support par e-mail css, ceci)
RunLoop

3
Tu as raison! Pour prendre en compte l'accessibilité lors de la suppression du plan, vous avez besoin d'un peu de JavaScript: paciellogroup.com/blog/2012/04/…
mems

vous ne pouvez même pas styliser / formater un commentaire de la même manière que vous le pouvez. difficile de fournir des commentaires à ce niveau de détail uniquement via un commentaire.
A-Dubb

@RunLoop Comment supprimer ou modifier la bordure bleue après le clic? Peut-il être fait via CSS ou Javascript est-il requis?
Nick

les personnes ayant ces problèmes peuvent simplement utiliser vimium-ff
yukashima huksay

60

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}

6
S'il vous plaît ne faites pas cela. Les utilisateurs qui naviguent sur votre page avec le clavier ne pourront pas voir l'élément actuellement ciblé. Au lieu de masquer le contour, brouillez l'élément si l'événement de clic provient d'une souris.
joepio

Il y a à coup sûr un autre style de mise au point ...
Arziel

47

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

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

4
Merci pour votre message! La propriété "box-shadow" était le point dans mon cas.
Nightking

1
C'était le même problème pour moi. Ce n'est pas pertinent, mais j'utilisais le thème Sage de Roots dans Chrome sur Ubuntu 17.10.
Spencer Hill

1
Seulement cela a fonctionné aprèsbox-shadow
sura2k

1
J'ai dû ajouter! Important pour le faire fonctionner, probablement le bootstrap a une définition spécifique pour cela quelque part
webMan

1
cela a fonctionné pour moi mon pote !, merci pour la publication de la solution. cheers
theITvideos

44

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.


14
"pour un meilleur résultat"? Pourriez-vous expliquer ce que! Important fait?
Popnoodles

5
Mais pouvez-vous expliquer ce qu'il fait? «Pour la raison qu'elle existe» n'explique pas aux gens qui ne connaissent pas sa raison quelle est sa raison.
Popnoodles

48
! important doit être utilisé rarement, et uniquement pour s'assurer que quelque chose ne doit pas être écrasé par les règles suivantes. Vous devez cibler vos éléments avec le bon sélecteur lors du remplacement des règles précédentes.
Popnoodles

24
L'utilisation de! Important est rarement justifiée. Vous devez toujours cibler vos sélecteurs css d'une manière qui a plus de sens, et ne pas utiliser! Important juste parce que cela vous donne un "meilleur résultat".
Ronen Cypis

5
Veuillez ne pas faire ça. Bien que cela réponde techniquement à la question du PO, nuancer chaque indication de la position de mise au point outline:0 !importantest une mauvaise UX et une mauvaise pratique de développement. Si vous faites cela, assurez-vous de faire autre chose pour indiquer la position de mise au point (comme changer la couleur d'arrière-plan de l'élément).
cloudworks

26

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.


1
Rappelez - vous, il n'a pas AFAIK besoin d'être en outlinetant que tel, tant que l'état: mise au point est fait clairement visible par d'autres moyens, comme border, background-color, box-shadow, etc.
Már Örlygsson

2
Meilleure réponse! Votre article vaut la peine d'être lu (et je regarde maintenant le reste de votre blog 😅) Le package npm visible est vraiment là où il en est pour l'instant.
FelDev

1
C'est certainement la meilleure solution. Avec seulement quelques lignes de code, je me suis débarrassé de cette bordure bleue gênante au clic, tout en la conservant sur le clavier. Merci!
pesta

1
Ces données sont-elles correctes? Ce sélecteur semble pris en charge dans Chrome, pas Firefox. developer.mozilla.org/en-US/docs/Web/CSS/…
Kevin Suttle

Il semble que dans Firefox, le sélecteur soit appelé :-moz-focusring, mais contrairement à ce que disent les docs, il ne fait pas de distinction entre le clic et le tabulation. Dans Chrome, à partir de maintenant, vous devez activer des indicateurs spécifiques pour que cela fonctionne
phil294

12

Ajoutez ceci dans votre fichier CSS.

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

3
Merci. a fonctionné mais MDN dit: Cette fonctionnalité n'est pas standard et n'est pas sur une piste standard. Ne l'utilisez pas sur des sites de production face au Web: cela ne fonctionnera pas pour tous les utilisateurs. Il peut également y avoir de grandes incompatibilités entre les implémentations et le comportement peut changer à l'avenir.
Behnam Mohammadi

8

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. :)


4
Pourquoi modifier ma réponse si vous ne remplacez que ma version minifiée par le même code mais étendu? Cela ne l'a pas clarifié mieux pour les utilisateurs. Obtenez-vous des crédits de réponse pour cela ou quelque chose? LOL ...
chuk

3
l'intérêt de sites StackExchange comme celui-ci est d'avoir des réponses qui aident ceux qui les lisent à comprendre. À cette fin, une réponse avec un code concis et minifié n'est pas aussi utile qu'un code formaté de manière lisible. Améliorer les réponses en les rendant plus lisibles est un moyen normal d'améliorer le site pour tout le monde.
bignose

7

pour ce problème:

entrez la description de l'image ici

utilisez ceci:

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

résultat:

entrez la description de l'image ici


7

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.


6

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>

4

C'est ce qui a fonctionné pour moi:

button:focus {
    box-shadow:none;
}

4

Le correctif pour Chrome et autres navigateurs

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

3

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

*{
outline: none;
}

ou

*{
outline-style: none;
}

3

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

3

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

.custom-button {
    outline: none
}

2

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

2

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


2

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


1

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.


1

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
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.