web-dev-qa-db-fra.com

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

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

a:focus { 
    outline: none; 
}

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

button:focus { 
    outline: none; 
}

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

(Et oui, je sais qu’il s’agit d’un problème de convivialité, mais j’aimerais donner mes propres conseils de mise au point qui conviennent à la conception plutôt qu’aux points gris laids)

cssfirefox
465
Edward Tanguay
button::-moz-focus-inner {
  border: 0;
}
699
user27656

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

285
Anderson Custódio

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 : 0px;
    } 
/*for IE8 */
    input[type="submit"]:focus, input[type="button"]:focus
    {     
        outline : none; 
    }
46
chinkchink

Les informations ci-dessous ont fonctionné pour moi en cas de liens, de partage - au cas où quelqu'un serait intéressé.

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

À votre santé!

42
foxybagga
:focus, :active {
    outline: 0;
    border: 0;
}
22
blizzyx

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

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

Pour supprimer le contour en pointillé 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

9
Renato Carvalho

J'ai essayé la plupart des réponses ici, mais aucune d'entre elles n'a fonctionné pour moi. Lorsque j'ai réalisé que je devais également supprimer le contour bleu des boutons de Chrome, j'ai trouvé une autre solution. Supprimer la bordure bleue du bouton de style personnalisé css sous Chrome

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

button:focus {outline:0 !important;}
7
Vartox

Il existe de nombreuses solutions sur le Web pour cela, dont beaucoup fonctionnent, mais pour le forcer, de sorte que rien ne puisse mettre en évidence/se concentrer une fois pour toutes les utilisations suivantes:

::-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
Shannon Hochkins

Il n’ya 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 browser.display.focus_ring_width sur 0. Dans ce cas, Firefox n’affiche plus aucune bordure pointillée.

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

5
Vitaly Sharovatov

Ajoutez simplement ce css pour la boite de sélection

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

Cela fonctionne bien pour moi.

4
Abhay Singh

Testé sur Firefox 46 et Chrome 49 en utilisant ce code.

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

Avant (des points blancs sont visibles)

input with white dots

Après (Les points blancs sont invisibles) enter image description here

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

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

Bonne codage !!

4
Madan Sapkota

Dans la plupart des cas sans ajouter le !important au 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
herci

Vous voudrez peut-être intensifier la concentration 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
John

Si vous avez une bordure sur un bouton et que vous souhaitez masquer le contour en pointillé 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;
}
2
Dave Everitt

Il semble que le seul moyen d'y parvenir consiste à définir

browser.display.focus_ring_width = 0

dans environ: config par navigateur.

2
AlexWilson
button::-moz-focus-inner { border: 0; }

Où button peut être le sélecteur CSS pour lequel vous souhaitez désactiver le comportement.

2
wavded

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

Si vous devez le supprimer en raison d'un problème de conception, ajoutez un état :focus au bouton qui le remplace par un autre repère visuel, par exemple, changer la bordure pour obtenir une couleur plus vive ou quelque chose du genre.

Parfois, je ressens le besoin de tracer ce contour agaçant, mais je prépare toujours un repère visuel de mise au point alternatif.

Et jamais utilisez la fonction blur() js. Utilisez la pseudo-classe ::-moz-focus-inner.

2
Flatline

Le code CSS ci-dessous fonctionne pour supprimer ceci:

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
kurumkan

Supprime le contour en pointillé des liens, des boutons et des éléments 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;
}
2
Fizer Khan

Cela va obtenir le contrôle de la plage:

:focus {
    outline:none;
}
::-moz-focus-inner {
    border:0;
}
input[type=range]::-moz-focus-outer {
    border: 0;
}

De: Supprime le contour en pointillé de l'élément d'entrée range dans Firefox

2
bob

Oui, ne manquez pas ! Important

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

Après avoir essayé de nombreuses options de ce qui précède, seuls les éléments suivants ont fonctionné pour moi.

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

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

0
usual

Cela fonctionne sur firefox v-27.0

 .buttonClassName:focus {
  outline:none;
}
0
star18bit

Avec Bootstrap 3, j'ai utilisé ce code. Le deuxième ensemble de règles ne fait que annuler ce que 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;
}

NOTE: votre fichier CSS personnalisé devrait venir après Bootstrap fichier CSS dans votre code html pour le remplacer.

0
Ehsan88