【Chrome】input等をfocusした際に表示される輪郭線(outline)を消す方法

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

結論

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

*: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)を消す方法のご紹介でした!

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍