IEでaタグのリンクをクリックした際に見える「点線」を消す方法をご紹介します。
今回の方法でリンククリック時の点線は表示されなくなりますが、キーボードのタブキー操作の際に、どこのリンクにフォーカスしているのかが分かりにくくなるというデメリットもあります。
アクセリビリティ上、今回のような処理を施すかどうかは要検討だと思いますので、お仕事の都合などで「どうしても点線を消したい」という場合にご参考いただければと思います。
アクセリビリティ上、今回のような処理を施すかどうかは要検討だと思いますので、お仕事の都合などで「どうしても点線を消したい」という場合にご参考いただければと思います。
リンクの点線を消すCSS
下図のように、リンクをクリックした時に表示される点線を消します。
まずはCSSで消す方法ですが、
|
1 2 3 |
a { outline:none; } |
リンクタグにoutline:noneを指定してあげます。
リンクの点線を消すJavascript
続いてJavascriptによる方法ですが、IEでリンクをクリックした時に出る点線を消すjQuery のブログ記事で
aタグにonfocus=”this.blur()”を付けると点線が表示されなくなる
という方法が掲載されていましたので、紹介させていただきます。
|
1 2 3 4 5 6 7 8 |
<script src="/jquery.min.js"></script> <script> $(document).ready(function(){ $("a").bind("focus",function(){ if(this.blur)this.blur(); }); }); </script> |
コメント