「Google chrome」で謎の青枠が表示される
inputに「:focus」を使用した際に謎の青い枠が表示されてしまいます。
chrome以外のブラウザ（Firefoxなど）ではこの現象は見られません。
謎の青枠はなぜ表示されるのか
なぜchromeだけこのような謎の青い枠が表示されるのかというと、chrome自体のデフォルトのCSSに指示が書かれているからです。
使用しているリセットCSSで消されている場合もありますが、消えていない場合はchromeが勝手につけてくれているCSSをリセットして上げる必要があります。
chromeで表示される謎の青枠を消す方法
*:focus {
outline: none;
}
これをCSSに追加してください。
これだけで、chromeのデフォルトの青枠が消えます。
あまりあの青枠を使うことはないと思うのでリセットCSS等に追加しておいても良いかもしれませんね。
コメント