chromeで表示される青い枠を消す方法【CSSで解決】

CSS

Google Chromeで、inputの部分に謎の青い線が表示されてしまう場合があります。
そこで、CSSで、青枠を消す方法を紹介します。

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

inputに「:focus」を使用した際に謎の青い枠が表示されてしまいます。
一番シェアのあるGoogle Chromeでこれはいやですよね・・・。
ちなみに他のブラウザではこの現状は見られません、

Google Chromeの謎の青枠はなぜ表示される?

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

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

下記のコードをCSSに追加すると解決することができます。

*:focus {
outline: none;
}

毎回つかするのはめんどくさいので、普段使っているリセットCSSに追加しておいた方が楽かもしれませんね。

コメント

タイトルとURLをコピーしました