CSS

Google Chromeで表示される謎の青い枠をCSSで消す方法

Google Chrome(クローム)でinputにフォーカスがあたった場合、謎の青線が表示されてしまいます。
今回は、Chromeで表示される謎の青い線を非表示にする方法を紹介します。

「Google chrome」で謎の青枠が表示される

inputに「:focus」を使用した際に謎の青い枠が表示されてしまいます。
chrome以外のブラウザ(Firefoxなど)ではこの現象は見られません。

 

 

謎の青枠はなぜ表示されるのか

なぜchromeだけこのような謎の青い枠が表示されるのかというと、chrome自体のデフォルトのCSSに指示が書かれているからです。
使用しているリセットCSSで消されている場合もありますが、消えていない場合はchromeが勝手につけてくれているCSSをリセットして上げる必要があります。

 

 

chromeで表示される謎の青枠を消す方法

Chromeの青い枠を消すには下記のCSSを追加します。

*:focus {
outline: none;
}

 

これを自身のサイトのCSSに追加してください。
これだけで、chromeのデフォルトの青枠を消すことができます。

 

 

あの青枠をそのまま使うことは少ないと思うので、リセットCSSに上記のコードを追加しておいても良いかもしれませんね。

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。
web制作で独学で稼ぎたいという人必見!
RELATED POST

COMMENT

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)