こんにちは、Ryohei（@ityryohei）です！

本記事では、Google Chromeでinputやtextareaといった要素をfocusした際に表示される輪郭線(outline)を消す方法をご紹介しています。

Chromeでinputをfocusすると線が表示されてデザインが崩れてしまう……どうすれば消せるの？

上記の疑問にお答えします。

では、解説していきます。

結論

Chromeのinputをfocusした際に表示される輪郭線は、下記を指定することで消すことができます。

*:focus {
  outline: none;
}

input要素のみの場合は下記のように指定します。

input:focus {
  outline: none;
}

outlineは要素の輪郭線を設定するプロパティです。詳細は下記をご参照ください。

https://developer.mozilla.org/ja/docs/Web/CSS/outline

輪郭線はどこで定義されているのか

この輪郭線はブラウザのユーザーエージェントが持っているデフォルトのスタイルシートで設定されています。Chromeの開発ツールでは「user agent stylesheet」と表示されているものです。本記事ではfocusをピックアップしていますが、focusの輪郭線だけではなくほとんどの要素に対してデフォルトのスタイルが設定されています。

スタイルシートの全容は下記のリンク先にて確認できますので、興味がある方はぜひ！せっかくなのでChrome以外のデフォルトのスタイルシートのリンク先も掲載しておきますね。（他も見つけ次第準備追加していきます。）

Chromehttps://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
Firefoxhttps://searchfox.org/mozilla-central/source/layout/style/res/html.css
Safarihttps://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

最後に

本記事を執筆するに伴い、改めて色々なWEBブラウザを触ってみました。現在は仕事・プライベート共にChrome一辺倒の私ですが、昔はFirefoxやOperaも使っていました。

Firefoxの急に落ちるバグによってChromeに移行したのですが、今は改善したのかな。だとしたらメインブラウザに戻したい気もするので、久しぶりにがっつり使ってみようかなと思います。気分転換に他のブラウザで仕事をしてみるのも悪くないものです。皆さんも機会がありましたらぜひ！

以上、Chromeでinput等をfocusした際に表示される輪郭線(outline)を消す方法のご紹介でした！

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら