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é?
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.
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.
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.
a:active, a:focus {
outline:none;
}
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;
}
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 .
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.
Celui-ci fonctionne le mieux pour moi
a{
outline: 0;
}
a:focus, *:focus {
noFocusLine: expression(this.onFocus=this.blur());
}
Tiré d'ici: http://www.cssjunction.com/css/remove-dotted-border-in-ie7/
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());
}
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
}