[解決済み] テキスト/入力ボックスの周りのフォーカスボーダー（アウトライン）を削除する方法は？(Chrome)[重複]。

質問

テキスト/入力ボックスの周りのオレンジまたは青のボーダー（アウトライン）を削除する方法を説明できる人はいますか？入力ボックスがアクティブであることを示すために、Chromeでのみ発生するのだと思います。以下は私が使っている入力CSSです。

input {
    background-color: transparent;
    border: 0px solid;
    height: 20px;
    width: 160px;
    color: #CCC;
}

<イグ

解決方法は？

この枠線は、要素がフォーカスされている（入力したり、Enterでボタンを押したりできる）ことを示すために使用されます。これを取り除くには アウトライン プロパティがあります。

textarea:focus, input:focus{
    outline: none;
}

ユーザビリティのために、どの要素がキーボードフォーカスを持つかをユーザが知るための他の方法を追加することもできます。

Chromeは、モーダルとして使用されるDIVなど、他の要素にもハイライトを適用します。これらの要素や他のすべての要素にハイライトを適用しないようにするには、次のようにします。

*:focus {
    outline: none;
}

⚠️アクセシビリティに関する警告

入力からアウトラインを取り除くことは、アクセシビリティ上良くない行為であることに注意してください。スクリーン・リーダーを使用しているユーザーは、ポインタの焦点がどこにあるのかが分からなくなります。もっと見る a11yprojectの情報