913 votes

Supprimer la bordure bleue d'un bouton personnalisé en css dans Chrome

Je travaille sur une page web, et je veux que le style soit personnalisé. <button> tags. Donc avec CSS, j'ai dit : border: none . Maintenant, il fonctionne parfaitement dans safari, mais dans chrome, lorsque je clique sur l'un des boutons, il met une bordure bleue gênante autour de lui. J'ai pensé que button:active { outline: none } ou button:focus { outline:none } fonctionnerait, mais aucun des deux ne fonctionne. Vous avez des idées ?

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



Et c'est de cette frontière que je parle :

enter image description here

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

1 votes

Ça me semble correct ? jsbin.com/oSAdovun/1/edit

0 votes

Je ne sais pas pourquoi ça marche dans votre démo Il le fait ici : jsfiddle.net/NgL8H @davidpauljunior

5 votes

J'ai ajouté la règle de mise au point au bas de la page, ce qui, selon vous, ne fonctionnait pas, mais cela semble fonctionner : jsfiddle.net/NgL8H/1

1712voto

Ronen Points 885

Faire cela, c'est non recommandé car elle fait régresser le accessibilité de votre site ; pour plus d'informations, consultez ce site. poste .

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

button:focus {outline:0;}

Vérifiez-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>

52 votes

Cela ne devrait-il pas être outline: none; ou cela n'a pas d'importance ?

2 votes

@henrywright Eh bien, le PO a essayé ça et ça n'a pas marché pour lui.

2 votes

@diosney L'OP a essayé outline: none; avec button:active et ça n'a pas marché. L'important est de le mettre dans button:focus . outline: none; et outline: 0; Les deux semblent fonctionner.

309voto

Nathan Points 398

Attendez ! Il y a une raison pour ce contour hideux !

Avant de supprimer cet affreux contour bleu, vous voudrez peut-être prendre accessibilité en considération. Par défaut, ce contour bleu est placé sur les éléments focalisables. Ainsi, les utilisateurs ayant des problèmes d'accessibilité peuvent mettre l'accent sur ce bouton en passant la souris dessus. Certains utilisateurs n'ont pas la motricité nécessaire pour utiliser une souris et doivent utiliser uniquement le clavier (ou un autre périphérique de saisie) pour interagir avec l'ordinateur. Lorsque vous supprimez le contour bleu, il n'y a plus d'indicateur visuel de l'élément mis au point. Si vous voulez supprimer le contour bleu, vous devez devrait le remplacer par un autre type d'indication visuelle de la mise au point du bouton.

Solution possible : Assombrir les boutons lors de la mise au point

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

Voici les boutons Bootstrap de base tels qu'ils apparaissent normalement : Bootstrap Buttons in Normal State

Voici les boutons lorsqu'ils reçoivent le focus : Bootstrap Buttons in Focused State

Voici les boutons lorsqu'ils sont pressés : enter image description here

Comme vous pouvez le constater, les boutons sont un peu plus foncés lorsqu'ils reçoivent la mise au point. Personnellement, je recommanderais de les rendre encore plus foncés pour qu'il y ait 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 un aspect souvent négligé mais qui peut contribuer à créer une expérience plus productive sur votre site web. De nombreux utilisateurs normaux utilisent les commandes du clavier pour naviguer sur les sites Web afin de garder les mains sur le clavier.

43 votes

Le problème est que, dans Chrome, cela se produit même en cas de clic, plutôt qu'en cas de simple tabulation (l'implémentation logique que l'on trouve dans la plupart des navigateurs). Donc, en réalité, Google réduit l'accessibilité car la plupart des développeurs vont simplement désactiver cette fonctionnalité (dans Chrome). Plus de temps perdu à rechercher/réparer les problèmes liés à Google/Chrome (sauvegarde du mot de passe, support des css pour les courriels, etc.)

3 votes

Tu as raison ! Pour prendre en compte l'accessibilité lors de la suppression des contours, il faut un peu de JavaScript : paciellogroup.com/blog/2012/04/

0 votes

Il n'est même pas possible de styliser/formater un commentaire comme on peut le faire pour une réponse, tho. il est difficile de fournir un retour à ce niveau de détail uniquement par le biais d'un commentaire.

64voto

Mike Points 866

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

*:focus {outline:none}

Comme l'a mentionné bagofcole, vous devrez peut-être ajouter !important également, de sorte que le style ressemblera à ceci :

*:focus {outline:none !important}

8 votes

Ne faites pas cela, s'il vous plaît. Les utilisateurs qui naviguent sur votre page à l'aide du clavier ne pourront pas voir l'élément actuellement ciblé. Au lieu de masquer le contour, estompez l'élément si l'événement de clic provient d'une souris.

0 votes

Non recommandé de cette façon

62voto

antonkronaj Points 790

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

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

5 votes

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

2 votes

C'était le même problème pour moi. Non pas que ce soit pertinent, mais j'utilisais le thème Sage de Roots dans Chrome sur Ubuntu 17.10.

2 votes

J'ai dû ajouter !important pour que cela fonctionne, bootstrap a probablement une définition spécifique pour cela quelque part.

45voto

Scabbia Points 181

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

button:focus {outline:0 !important;}

Une règle qui possède la propriété !important sera toujours appliquée, quel que soit l'endroit où elle apparaît dans le document CSS.

14 votes

"pour un meilleur résultat" ? Pouvez-vous expliquer ce que fait !important ?

2 votes

Pour la raison !important existe... si vous voulez supprimer tous les contours, vous devriez l'utiliser

5 votes

Mais pouvez-vous expliquer ce qu'il fait ? "Pour la raison qu'il existe" n'explique pas aux personnes qui ne connaissent pas sa raison quelle est cette raison.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X