Maison > Article > interface Web > Supprimez la bordure en pointillés qui apparaît lorsque vous cliquez sur un lien hypertexte ou un bouton
Supprimez la bordure en pointillés qui apparaît lorsque vous cliquez sur un lien hypertexte ou un bouton
- 巴扎黑original
- 2017-04-05 16:54:012023parcourir
Au cours du processus de production front-end, vous constaterez que certains liens texte/image, ou certains contrôles de saisie, seront entourés d'une bordure en pointillé lorsque vous cliquerez dessus. Généralement, des bordures en pointillés apparaîtront sous les navigateurs Firefox et IE, mais pas sous Google.
Ces bordures en pointillés sont utilisées comme auxiliaire de conception visuelle. Lorsque vous utilisez la touche Tab du clavier pour parcourir la page sans utiliser la souris, l'emplacement du lien ou du contrôle actuel sera marqué pour une navigation facile. Ceci est encore plus essentiel pour les personnes ayant une déficience visuelle.
Mais parfois, nous ne voulons pas les utiliser parce que les navigateurs interprètent les boîtes en pointillés différemment et de manière irrégulière, ce qui devient un défaut dans la conception visuelle. Nous souhaitons donc pour le moment désactiver ces bordures en pointillés afin que le plaisir visuel du spectateur soit impeccable.
Pure CSS supprime la bordure en pointillés qui apparaît lorsque l'on clique sur un lien hypertexte ou un bouton
<style type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
</head>
<body>
<a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
<a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
<input type="button" value="admin10000.com"/>
<button>admin10000.com</button>
</body>
Comme le montre le code ci-dessus, ce problème peut être résolu en définissant le contour de l'attribut CSS.
Il y a un bug dans FF, dans lequel les balises d'entrée et de bouton sont spécialement traitées via l'attribut privé ::-moz-focus-inner
La méthode ci-dessus n'est pas valide sous IE6 et IE7. Il peut être résolu en utilisant l'attribut onfocus, comme suit :
Il suffit d'une seule phrase pour utiliser la méthode jquery, c'est très simple et supporte tous les navigateurs
$("a,input,button").focus(function(){this.blur()});
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!