☰

テキスト/入力ボックスの周りのフォーカス境界線（アウトライン）を削除するにはどうすればいいですか? (Chrome) [重複] 質問する

tag-icon • tag-icon css google-chrome input focus border
テキスト/入力ボックスの周りのフォーカス境界線（アウトライン）を削除するにはどうすればいいですか? (Chrome) [重複] 質問する

テキスト/入力ボックスの周りのオレンジまたは青の境界線 (アウトライン) を削除する方法を説明できる人はいますか? これは、入力ボックスがアクティブであることを示すために Chrome でのみ発生すると思います。私が使用している入力 CSS は次のとおりです。

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

青い枠線と「例」が書かれたテキスト ボックス

ベストアンサー1

この境界線は、要素がフォーカスされていることを示すために使用されます（つまり、入力したり、Enterキーを押してボタンを押したりすることができます）。概要ただし、次のプロパティがあります。

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

ただし、使いやすさのために、どの要素にキーボード フォーカスがあるかをユーザーが知ることができる別の方法を追加することもできます。

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

*:focus {
    outline: none;
}

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

入力からアウトラインを削除するのはアクセシビリティの悪い習慣であることに注意してください。スクリーン リーダーを使用するユーザーは、ポインターがどこにフォーカスされているかを確認できません。詳細a11yprojectの情報

おすすめ記事