リンクの点線を消す, ボタンの点線を消すCSS

概要

a, a>img をクリックした際の点線を消す。
button, input[type=button], input[type=submit]の点線の消し方もついでに。

つまり、フォーカスのある要素の点線の消し方について

キーワード
hidefocus, outline, ::-moz-focus-inner

f:id:u_7cc:20130723184302p:plain

no dot for links, input, button
＊ページを開いたらタブキーで移動

CSS outlineを用いる。 IE7以下にも対応するなら、HTML hidefocus を併用する

IE8+ と他のブラウザはCSSを設定するだけ

a {
  outline: none;
}

IE5.5 - 7 はHTML属性のhidefocusを個別に設定する。

1.HTMLに直接記述する

<a herf="" hidefocus="true">

2.JavaScriptで設定する

element.hideFocus = true

全てのリンクではなく、タブUIなど特定の箇所のみ指定すると良いと思う。

基本的にはリンクと同じようにする。
しかしFirefoxのみCSS ::-moz-focus-inner と border を指定する。

/* IE8+, Chrome */
input, button {
  outline: 0;
}

/* Firefox */
input::-moz-focus-inner, button::-moz-focus-inner {
  border: 0;
}

HTML(IE5-7)

<button hidefocus="true">

blurはフォーカスが外れるので論外
点線を消すだけでもアクセサビリティが低下するので、点線以外の方法で目立たせるようにすると良い。 :focusとcolor, border-colorや、font-weightなど
hidefocusはIE独自拡張のexpressionを利用するとCSSのみで実現出来るが、様々な理由から非推奨。2014年現在なら対応の必要性も少ない。

a {
  outline: none; /*IE8+ and others*/
  outline: expression(hideFocus='true'); /*IE5.5+*/
}