web-dev-qa-db-fra.com

Comment supprimer la bordure en pointillé autour des liens hypertexte actifs dans IE8 avec CSS

Les textes de lien hypertexte actifs sont mis en surbrillance avec une bordure en pointillé. Lorsque vous utilisez des effets sur de tels liens hypertextes (fadeIn/fadeOut), vous obtenez des effets étranges. Comment puis-je désactiver/supprimer la bordure en pointillé?

cssinternet-explorer-8
45
glaz666

Essayez ce CSS:

a:active, a:selected, a:visited { 
    border: none;
    outline: none;
}

Notez que cela doit être après les règles a:hover. Merci à PEra dans les commentaires de suggérer d'utiliser également le sélecteur a:selected.

REMARQUE

Ce qui précède ne fonctionne pas dans IE. 9. La suppression de a: selected le fait fonctionner dans IE9.

59
Lucas Jones

Voici un moyen typique et sûr de le faire:

a:active, a:focus {
   outline:  none; /* non-IE */
   ie-dummy: expression(this.hideFocus=true); /* IE6-7 */
}

Puisque expresssion() a été vidé de son contenu dans IE8, vous aurez peut-être besoin d'un script:

if (document.documentElement.attachEvent)
    document.documentElement.attachEvent('onmousedown',function(){
         event.srcElement.hideFocus=true
    });

Si vous souhaitez supprimer le contour de focus par défaut, vous devez définir votre propre style pour :focus, sinon les utilisateurs du clavier auront de la difficulté à utiliser votre site.

33
Kornel

Faites attention. La bordure en pointillé est un élément précieux de la navigation au clavier. Il met en évidence quel lien sera cliqué.

a:active { outline: none; }

L'auteur Nathan Smith donne une discussion plus approfondie à ce sujet }, et diverses questions connexes sur son blog.

15
Sampson
a:active, a:focus {
    outline:none;
}
12
Frankie Jarrett

Essayez avec ce CSS:

Pour Mozilla :

|:-moz-any-link:focus { outline: none; }

|:focus { outline: none; }

button, input[type="reset"], input[type="button"], input[type="submit"] { outline: none; }

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px 2px 0px 2px; border: 1px dotted transparent; }

Pour IE8 :

a:active, a:focus { 
    border:none;
    outline:none;
}
9
Ana

Le { outline: none; } réduit la convivialité du clavier. Et le sélecteur a:active {} semble le casser aussi bien la dernière fois que j’ai vérifié dans Firefox.

Il existe un moyen pour JS de supprimer la frontière sans rien casser, ainsi que le code JS pour supprimer la frontière dans IE6 et IE7.

J'ai décrit la méthode dans mon tutoriel .

3
Zoffix Znet

Solution en JavaScript pour supprimer la bordure active des liens de tous les navigateurs: Add the event onfocus = "this.blur ();" sur votre lien 

<a href="#" onfocus="this.blur()"> Link </a>

REMARQUE: cela fonctionnera dans tous les navigateurs.

3
Paulo Roberto

Celui-ci fonctionne le mieux pour moi

a{
  outline: 0;
}
2
Tosh
a:focus, *:focus {
    noFocusLine: expression(this.onFocus=this.blur());
}

Tiré d'ici: http://www.cssjunction.com/css/remove-dotted-border-in-ie7/

2
eva

je voulais que cela fonctionne pour Button et cela a fonctionné pour moi

button { 

    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;    
    background-color: transparent;
    noFocusLine: expression(this.onFocus=this.blur());
}
1
Anoop Narayanan

vous pouvez également utiliser le contour: 0 sur l'objet et l'intégrer. une mise à zéro de base de css ressemblerait à ceci:

a, a:visited { 
    text-decoration:none;
    color: #e3a512; 
    }
a:hover, a:active, a:focus { 
    text-decoration:none;
    color: #fff;
    outline:0;
    }
object, embed, a, a img, a:active, a:selected, a:visited {
    outline:0
    }
0
kristina childs