読者です 読者をやめる 読者になる 読者になる

7cc@はてなブログ

JavaScriptとかとか

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

概要

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

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

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

f:id:u_7cc:20130723184302p:plain

demo

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

1.リンク(アンカー)の点線を消す

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など特定の箇所のみ指定すると良いと思う。

2. buttonの点線を消す

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

CSS

/* 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+*/
}

ブラウザと要素ごとの点線の消し方まとめ

browser a button
IE7- hidefocus hidefocus
IE8+ outline outline
Chrome outline 最初から点線無し
Firefox outline ::-moz-focus-inner