Supprimez la bordure en pointillés qui apparaît lorsque vous cliquez sur un lien hypertexte ou un bouton-tutoriel CSS-php.cn

Supprimez la bordure en pointillés qui apparaît lorsque vous cliquez sur un lien hypertexte ou un bouton

巴扎黑

Libérer： 2017-04-05 16:54:01

original

1959 Les gens l'ont consulté

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>

Copier après la connexion

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 :

admin10000.com

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Supprimez la bordure en pointillés qui apparaît lorsque vous cliquez sur un lien hypertexte ou un bouton