Comment supprimer le contour en pointillés de Firefox sur les BOUTONS ainsi que les liens?


507

Je peux faire en sorte que Firefox n'affiche pas les contours laids en pointillés sur les liens avec ceci:

a:focus { 
    outline: none; 
}

Mais comment puis-je faire cela pour les <button>balises également? Quand je fais ça:

button:focus { 
    outline: none; 
}

les boutons ont toujours le contour de mise au point en pointillé lorsque je clique dessus.

(et oui, je sais que c'est un problème d'utilisabilité, mais je voudrais fournir mes propres conseils de mise au point qui sont appropriés à la conception au lieu de points gris laids)


2
Il semble que dans Firefox 4, les éléments n'obtiennent plus de contour par défaut lorsqu'ils sont cliqués, mais uniquement lors de la réception du focus clavier.
Geert

1
Ce que vous appelez "laid" est destiné à soutenir l'accessibilité d'un site Web. Seuls les utilisateurs du clavier ne peuvent plus déterminer quelle partie du site Web est mise au point lors de la suppression de ce contour. Votre site Web serait complètement inaccessible et cela ne devrait jamais être le cas. Ne retirez jamais le contour. Mieux le coiffer à votre façon.
Markus Graf

Réponses:


787
button::-moz-focus-inner {
  border: 0;
}

15
Oui, ça marche aussi pour moi! Maintenant, comment peut-on le faire pour les sélections?
7wp

16
Notez que cela fonctionne également pour l'entrée (par exemple input :: - moz-focus-inner {border: 0;})
El Yobo

15
But du double colon: (notation CSS3) evotech.net/blog/2007/05/…
sholsinger

21
Celui-ci n'a pas fonctionné pour moi, car bootstrap.css faisait ces boutons en pointillés laids. Au lieu de cela, j'ai mis:focus {outline:none !important;}
machineaddict

5
: focus {contour: none;} :: - moz-focus-inner {border: 0;} serait moins spécifique
Ben

311

Pas besoin de définir un sélecteur.

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Cependant, cela viole les meilleures pratiques d'accessibilité du W3C. Le plan est là pour aider ceux qui naviguent avec des claviers.

https://www.w3.org/TR/WCAG20-TECHS/F78.html#F78-examples


8
Merci, cela a fonctionné pour moi lorsque la bonne réponse n'a pas fonctionné. Je dois avoir utilisé le mauvais sélecteur.
irl_irl

Merci pour cela, cela le supprimera-t-il également sur les liens et les boutons?
Nathan

3
Celui-ci est le meilleur! La réponse acceptée est seulement pour <button>, pas <a>ni<input>
Ron van der Heijden

2
Parfait dans Mozilla Firefox 30 sous Ubuntu (GNU / Linux).
e-info128

4
J'appuie la note sur cette rupture d'accessibilité. Il est important de se rappeler que tout le monde ne peut pas utiliser une souris, ni voir, ni bien voir. Cela dit, selon le lien (et le bon sens), masquer le contour ne se brise que lorsqu'il est terminé without ... an author-supplied visual focus indicator- en d'autres termes, il est correct de remplacer le style d'agent utilisateur par le vôtre, comme OP l'a mentionné. Idéalement, il devrait être très contrasté.
johncip

48

Si vous préférez utiliser CSS pour vous débarrasser du contour en pointillé:

/*for FireFox*/
    input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner
    {   
        border : 0;
    } 
/*for IE8 and below */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }

Vous n'avez pas besoin d'une unité sur des nombres qui sont nuls. 0pxpeut être remplacé par juste0
argot

44

Ce qui suit a fonctionné pour moi en cas de LIENS, pensé au partage - au cas où quelqu'un serait intéressé.

a, a:visited, a:focus, a:active, a:hover{
    outline:0 none !important;
}

À votre santé!


12
Cela a { outline: none; }devrait simplement suffire pour les liens.
accordez le

3
ici, le! important a fait l'affaire, les autres solutions n'avaient pas cela et n'ont pas fonctionné. pour moi.
Cristiano Fontes

Mais souvent, vous devez utiliser a { outline: none; }avec !important->a { outline: none !important; }
joryl

24
:focus, :active {
    outline: 0;
    border: 0;
}

Fonctionne comme un charme pour une boîte d'options sélectionnée que j'utilisais
Muhammad Ahsan

1
Ce n'était pas assez précis et je ne voulais pas utiliser des aéléments importants ou ciblés uniquement , j'ai donc trouvé une bonne option body :focus, body :active { outline: 0; border: 0; } ::-moz-focus-inner { border: 0; }
Ivan Durst

10

[Mise à jour] Cette solution ne fonctionne plus. La solution qui a fonctionné pour moi est celle-ci https://stackoverflow.com/a/3844452/925560

La réponse marquée comme correcte ne fonctionnait pas avec Firefox 24.0.

Pour supprimer le contour en pointillés de Firefox sur les boutons et les balises d'ancrage, j'ai ajouté le code ci-dessous:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

J'ai trouvé la solution ici: http://aghoshb.com/articles/css-how-to-remove-firefoxs-dotted-outline-on-buttons-and-anchor-tags.html


2
Cela ne fonctionne plus: / La solution qui a fonctionné est celle-ci stackoverflow.com/a/3844452/925560
Renato Carvalho

8

J'ai essayé la plupart des réponses ici, mais aucune n'a fonctionné pour moi. Quand j'ai réalisé que je devais aussi me débarrasser du contour bleu des boutons sur Chrome, j'ai trouvé une autre solution. Supprimer la bordure bleue du bouton de style personnalisé CSS dans Chrome

Ce code a fonctionné pour moi sur Firefox version 30 sur Windows 7. Peut-être qu'il pourrait aider quelqu'un d'autre là-bas :)

button:focus {outline:0 !important;}

Même chose ici, c'est la seule solution fonctionnant sur FF 38.0.5
OlivierH

6

Il n'y a aucun moyen de supprimer ces focus en pointillés dans Firefox en utilisant CSS.

Si vous avez accès aux ordinateurs sur lesquels votre application Web fonctionne, accédez à about: config dans Firefox et définissez-le browser.display.focus_ring_widthsur 0. Ensuite, Firefox n'affichera aucune bordure en pointillés.

Le bogue suivant explique le sujet: https://bugzilla.mozilla.org/show_bug.cgi?id=74225


Merci, cela fonctionne bien, mais j'ai créé tant de liens auparavant, je n'ai jamais rencontré ce problème jusqu'à présent. mais maintenant je suis confus alors quelle est la raison précédente pour présenter?
Durga Rao

Cette réponse est maintenant complètement fausse. Réglage de la ::-moz-focus-inner {border:0;}comme mentionné dans plusieurs autres réponses fonctionne parfaitement.
Andy Mercer

@AndyM Cette réponse fonctionne. La solution présente dans d'autres réponses est pour CSS et ne fonctionne que pour les sites individuels.
Rahil Wazir

7
La question demande comment cela peut être fait avec CSS, et la réponse dit que ce n'est pas possible. C'est faux. Ça peut être.
Andy Mercer

6

Il existe de nombreuses solutions sur le Web pour cela, dont beaucoup fonctionnent, mais pour forcer cela, de sorte qu'absolument rien ne puisse mettre en évidence / se concentrer une fois par utiliser les éléments suivants:

::-moz-focus-inner, :active, :focus {
    outline:none;
    border:0;
    -moz-outline-style: none;
}

Cela ajoute juste un peu de sécurité supplémentaire et scelle l'affaire!



5

Testé sur Firefox 46 et Chrome 49 à l'aide de ce code.

input:focus, textarea:focus, button:focus {
    outline: none !important;
}

Avant (des points blancs sont visibles)

entrée avec des points blancs

Après (les points blancs sont invisibles) entrez la description de l'image ici

Si vous souhaitez appliquer uniquement sur quelques champs de saisie, boutons, etc. Utilisez le code plus spécifique.

input[type=text] {
  outline: none !important;
}

Codage heureux !!


Le !importantétait nécessaire pour moi de remplacer la feuille de style de Firefox. À votre santé!
SamHH

5

Ajoutez simplement ce css pour la case de sélection

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Cela fonctionne bien pour moi.


4

Je pense que vous devriez vraiment savoir ce que vous faites en supprimant le contour de la mise au point, car cela peut gâcher la navigation au clavier et l'accessibilité.

Si vous devez le retirer en raison d'un problème de conception, ajoutez un :focus état au bouton qui le remplace par un autre repère visuel, comme changer la bordure en une couleur plus lumineuse ou quelque chose comme ça.

Parfois, je ressens le besoin de supprimer ce contour ennuyeux, mais je prépare toujours un repère visuel de mise au point alternative.

Et n'utilisez jamais la blur()fonction js. Utilisez la ::-moz-focus-innerpseudo-classe.


4

Dans la plupart des cas, sans ajouter le !importantau code CSS, cela ne fonctionnera pas.

Alors n'oubliez pas d'ajouter !important

a, a:active, a:focus{
    outline: none !important; /* Works in Firefox, Chrome, IE8 and above */
}


Ou tout autre code:

button::-moz-focus-inner {
  border: 0 !important;
}

3
button::-moz-focus-inner { border: 0; }

buttonpeut être le sélecteur CSS pour lequel vous souhaitez désactiver le comportement.


3

Vous voudrez peut-être intensifier la mise au point plutôt que de vous en débarrasser.

button::-moz-focus-inner {border: 2px solid transparent;}

button:focus::-moz-focus-inner {border-color: blue} 

2
@Nathan un peu en retard, mais le fait de ne pas avoir de style en focus mettra à mal l'expérience du clavier. vous ne pourrez pas savoir ce qui est ciblé lorsque vous appuyez sur la touche de tabulation .
Hkan

@Hkan Ouais, je suis d'accord. Mais le contour de Firefox est moche surtout quand il se trouve autour d'une bordure de focus personnalisée.
Nathan du

@Nathan, je suis entièrement d'accord avec cela. Ce que nous devons faire est de fournir notre propre style pour l'état de focus plutôt que de rendre les éléments identiques sur cet état.
Hkan

3

Supprimez le contour en pointillé des liens, du bouton et de l'élément d'entrée.

a:focus, a:active,
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

3

Si vous avez une bordure sur un bouton et que vous souhaitez masquer le contour en pointillés dans Firefox sans supprimer la bordure (et donc sa largeur supplémentaire sur le bouton), vous pouvez utiliser:

.button::-moz-focus-inner {
    border-color: transparent;
}

3

Le code CSS ci-dessous fonctionne pour supprimer cela:

a:focus, a:active, 
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
select::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
    border: 0;
    outline : 0;
}

2

Il semble que la seule façon d'y parvenir est de définir

browser.display.focus_ring_width = 0

dans about: config par navigateur.


1

Cela fonctionne sur Firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}

1

Après avoir essayé de nombreuses options ci-dessus, seules les suivantes ont fonctionné pour moi.

*:focus, *:visited, *:active, *:hover  { outline:0 !important;}
*::-moz-focus-inner {border:0;}

En fait (dans Firefox 77 au moins), vous avez seulement besoin: button:focus { outline: none !important } Ou si vous ne m'aimez pas! Important, cela fonctionne aussi pour remplacer le style de Firefox: :root button:focus { outline: none }
Jonas Sandstedt

1

Avec Bootstrap 3, j'ai utilisé ce code. Le deuxième ensemble de règles annule simplement ce que le bootstrap fait pour les boutons focus / actifs:

button::-moz-focus-inner {
  border: 0;    /*removes dotted lines around buttons*/
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus{
  outline:0;
}

REMARQUE: votre fichier css personnalisé doit venir après le fichier css Bootstrap dans votre code html pour le remplacer.


1

Oui ne manquez pas ! Important

button::-moz-focus-inner {
 border: 0 !important;
}

! important ne fait pas partie de la réponse ici, et si votre application en a besoin, vous avez plus de problèmes à résoudre que de points forts autour de vos boutons. Efforcez-vous toujours d'éviter! Important.
monokrome

0

Vous pouvez essayer button::-moz-focus-inner {border: 0px solid transparent;}dans votre CSS.

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.