[Google Chrome] input要素以外でも線(アウトライン)が表示される問題

Google Chromeではinputにフォーカス(:focus)すると青い線(アウトライン)が表示されます。これはChromeのデフォルトスタイルシート(user agent stylesheet)にてoutlineが設定されているためです。

これとは別にinputでない要素でもこの青い線(アウトライン)が表示されることがありました。

input要素系の青い線

解決法

input要素らの線を消す方法ですが、以下のように消します。

input[type="text"], 
input[type="password"], 
textarea, 
select {
    outline: none;
}

デフォルトスタイルシートの設定を上書きしている形です。
これを使用する場合は、オリジナルのCSSより前に記述すると良いです。(リセットCSSのような感じ)

input以外の要素の青い線

原因

input要素以外でも線(アウトライン)が表示される問題は何が原因なのか。
私の経験上、その問題の要素にはtabindex属性が付与されています。

確かにtabindex属性があるとフォーカスするべき要素なのでしょうが、だからといって要素に線(アウトライン)が付いてしまうのは見栄えが悪い場合が多いです。

ちなみにtabindex属性とは

このtabindex属性は、Tabキーによるフォーカスの移動順序を指定することができます。
要はtabindex属性が指定されると、指定した順番でフォーカスが可能になり、また本来フォーカスできない要素でもフォーカスが可能になるのです。

解決法

1. tabindex属性をやめる
tabindex属性を使用しないのであれば、この属性を外すだけで解決です。

2. tabindex属性の付いた要素に対して線を付けない
CSSを追加して発生する影響が気になるのであれば、その要素に対してoutlinenoneにしましょう。


.example:focus {
  outline: none;
}

3. 全ての要素に対してフォーカスに線は付けない
要素ごとにCSSを当てていくのがめんどう、よく分からない、細かいことは気にしないのであれば。


*:focus {
  outline: none;
}


input要素のフォーカス時に線が付くのは知っていましたが、まさかtabindex属性の付いた要素に対しても線が付いてしまうとは。