• RSS

[IE]CSS やJS で、リンククリック時の点線を消す方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

IE でa タグのリンクをクリックした際に見える「点線」を消す方法をご紹介します。

今回の方法でリンククリック時の点線は表示されなくなりますが、キーボードのタブキー操作の際に、どこのリンクにフォーカスしているのかが分かりにくくなるというデメリットもあります。

アクセリビリティ上、今回のような処理を施すかどうかは要検討だと思いますので、お仕事の都合などで「どうしても点線を消したい」という場合にご参考いただければと思います。

リンクの点線を消すCSS

下図のように、リンクをクリックした時に表示される点線を、
CSS やJS で、リンククリック時の点線を消す方法

まずはCSS で消す方法ですが、
a{
  outline:none;
}
リンクタグにoutline:none を指定してあげます。


リンクの点線を消すJavascript

続いてJavascript による方法ですが、
IEでリンクをクリックした時に出る点線を消すjQuery のブログ記事で


aタグにonfocus=”this.blur()”を付けると点線が表示されなくなる

という方法が掲載されていましたので、紹介させていただきます。

<script src="/jquery.min.js"></script>
<script>
$(document).ready(function(){
	$("a").bind("focus",function(){
		if(this.blur)this.blur();
	});
});
</script>



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください