chromeのフォーカスの色

Question

MacのChrome70.0でHTMLの表示確認を行なっているのですが、input要素のフォーカスリングの色が、青になったりオレンジになったりします。

CSSではoutlineを何も指定していないのでブラウザのデフォルトのスタイルが当てられるのですが、いつもは青なのに時々オレンジになり、キャッシュをクリアすると青に戻ったり戻らなかったり。。。再現方法もわからず困っています。

:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

どなたかご存知の方、なぜ色が変わってしまうのか教えていただけないでしょうか？

Comments

[dit.]

通常のブラウザモードとデバイスモードで違うという話もありますが、この状態と同じですか？（ディベロッパーツールでスマホ用のテストをしているときにオレンジになる？）https://stackoverflow.com/questions/7538771/what-is-webkit-focus-ring-color/11929801 ページ下部の投稿

[jlhgw]

これです！ありがとうございます！ディベロッパーツールをOFFにしたら青色に戻りました。

Answer 1

とりあえずoutlineをnoneにしてみては。

• [Google Chrome] input要素以外でも線(アウトライン)が表示される問題

Comments

[jlhgw]

ありがとうございます。
outline:none; は指定すれば効くのですが、ブラウザデフォルトのカラーというのが要件なんです。

Answer 2

dit. さんに教えていただいたページに詳しく書かれていました。
ディベロッパーツールをOFFにすることで、chromeで青い枠に戻りました。

テストのためにオーバーライドされているのですね。
勉強になりました。