どうも7noteです。開発していると、意図していない場所に黒い太枠線がでてくるようになって、なんだこれって思ってました。こいつを消します。
![focus.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F8464525a-7c33-c343-6fd9-ffe9ab459a44.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=eb64d74cbc1c0acb44972bc4fec44e8f)
フォームやマウスカーソルで要素を触ると出てくる・・・
どうやらクロームの初期値として、:focusがある時に出るようです。
![f12.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F064502f8-220e-230a-d0ea-2e2d81432ba2.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=4e647ea98e891dad7a32a9045d1f57b7)
消し方
消したい要素にoutline: none;
だけ。とっても簡単。
input {
outline: none;
}
まとめ
以前まではあまり気にしていなかったのですが、前回のクロームのアップデートの影響ですごく悪目立ちすることがあったので、必要ない場面では消すようにしています。
※タブキーを使って移動していると、どこにフォーカスしているかわからなくなるので注意!!