零弐壱蜂

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

3 min read

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 を追加して発生する影響が気になるのであれば、その要素に対してoutlineをnoneにしましょう。
.example:focus {
  outline: none;
}
  1. 全ての要素に対してフォーカスに線は付けない
    要素ごとに CSS を当てていくのがめんどう、よく分からない、細かいことは気にしないのであれば。
*:focus {
  outline: none;
}

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

Edit on GitHub