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制作を独学で勉強して稼ぎたいという方必見です！
勉強方法から案件獲得までのロードマップを公開中！！
web制作で独学で稼ぐまでのロードマップ！web制作で独学で稼ぐまでのロードマップを公開。副業やフリーランスに独学で！web制作で独学で稼げるまでどんなことを勉強しないとダメなのか確認して副業やフリーランスも目指しましょう！...
