Chromeで青枠が表示される問題【コーディングメモ】

青枠が表示される

スライドショーjQueryプラグイン「slick」を使っていた時画像をクリックすると画像の周りに青い枠が表示されることに気が付きました。
GoogleChromeで表示されていたので試しにFirefoxで確認したところ何も表示されない。
調べたところどうやらGoogleChromeのデフォルトスタイルシートにoutlineが設定されているようです。
その表示を消すためにやったことをメモ代わりに書いておきます。

状況

GoogleChromeにおいて「input要素」やその他の要素(tabindex属性(?))で青枠が表示されてしまう。

解決法

一番簡単な方法としてはすべてのフォーカスに線をつけないようにすると良いかもしれません。

*:focus {
outline: none;
}

CSSの一番上辺りに入れておけば青枠が消えるかと思います。

また1つの部分のみの線を消したい場合はその要素にoutline:none;を当ててあげれば消すことができると思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る