2008年08月25日

リンクをクリックした時の点線を消すCSSとスクリプト

リンクをクリックした時に表示される点線がデザインを台無しにしてしまう事が多々あるので、点線を消す方法。

CSS2以降のプロパティーの

a {
outline: none;
}

これで消えるんだけど、フォーカスされた時にどこが選択されているのか分からないので、a:focus の定義済みクラスでスタイルが変わるようにしておくと良いです。
しかしコレ、IEが対応して無い。やっぱMSはこういう所が不親切だよなー。

IE以外ならこんな感じでいける。

a,a:link,a:visited {
color:#0000FF;
text-decoration:underline;
outline:none;
}

a:hover,a:active,a:focus {
color:#FF0000;
}

FirefoxやSafariはコレでバッチリでした。


どうしてもIEなら、aタグにJavascriptを入れる事で回避可能。

<a href="URL" onfocus="this.blur();">ほげほげ</a>

これで消える。
でもaタグ一つ一つにスクリプトを付けるのもメンドくさいから

window.onload=function(){
a=document.getElementsByTagName("a");
for(i=0;i<a.length;i++){
a[i].onfocus=function(){this.blur();}
}
area=document.getElementsByTagName("area");
for(i=0;i<area.length;i++){
area[i].onfocus=function(){this.blur();}
}
}

これで、aタグに一括で適用できます。
でも、this.blur()ってフォーカス禁止だから、キーボードで操作できなくなっちゃって、ユーザビリティーが最低なんだよね。

なので、IEはもうユーザビリティー重視するか、デザインを優先させるか割り切るしか無いみたい。
posted by の〜♪ at 11:59| JavascriptとかAjaxとか | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。