CSS により、入力ボックスをアクティブにした後に Chrome がオレンジ色の境界線を自動的に追加することが禁止されています box_html/css_WEB-ITnose

Chrome はデフォルトですべての入力ボックスにオレンジ色の枠線を追加しますが、これにより Web サイトがより親しみやすくなる場合がありますが、カスタマイズされたスタイルには影響します。 Google Chrome ブラウザでマウスが入力ボックスをクリックすると、カーソルが入力ボックスに移動すると、アクティブな入力ボックスにオレンジ色の枠線が追加されます。マウス カーソルが入力ボックスから離れると、オレンジ色の枠線が追加されます。消えるだろう。 Google Chrome は入力ボックスに CSS スタイルを自動的に追加しますが、これは非常に見苦しく、効果に影響します。ここでは、アクティブ化された入力ボックスが Google Chrome でオレンジ色のスタイルを追加しないようにする方法を示します。

たとえば、角の丸いボックスを使用して入力ボックスを作成した場合、フォーカス中に境界線の属性を調整しなければ、Chrome はデフォルトで正方形の境界線を追加し、入力を設定するコマンドを無視します。何もない境界線。

トラブルを避けるために、アクティブ化された入力ボックスへの Chrome の境界線の追加を禁止することができます:

1. アクティブ化されたすべての入力ボックスへの境界線の追加を無効にします (この方法を推奨します)

*:focus {outline: none}

2. アクティブ化された入力ボックスに境界線を追加することは禁止されています。例:

.abc:focus{ outline:none } 

3. 入力ボックスがアクティブ化されているときに境界線のスタイルをカスタマイズすることもできます:

.abc:focus { outline:Blue Solid 4px;}