Safari と Chrome で入力テキスト要素からフォーカスの境界線を削除するにはどうすればよいですか?

入力テキスト要素のフォーカス境界線の削除

入力テキスト要素がフォーカスを取得すると、Safari や Chrome などの特定のブラウザーでは青い境界線が表示される場合があります。彼らの周りに。この視覚的な手がかりは、アクセシビリティや使いやすさに役立ちますが、特定のデザイン レイアウトでは必ずしも望ましいとは限りません。

Safari でこの境界線のハイライトを削除するには、CSS を利用します:

input.middle:focus {
    outline-width: 0;
}

これターゲットを指定すると、目的の入力要素をクラス「middle」で分離できます。あるいは、すべてのフォーム要素に影響を与えるには、

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

を使用します。Noah Whitmore は、これを contenteditable 要素に拡張することを提案しています:

[contenteditable="true"]:focus {
    outline: none;
}

最終的には、次のようにしてすべての要素のフォーカス アウトラインを無効にすることもできます。

*:focus {
    outline: none;
}

ただし、このアプローチはアクセシビリティ上の理由から推奨されません。フォーカスのアウトラインは、インターフェイスを操作するユーザーにとって役立つインジケーターとして機能することに注意してください。

以上がSafari と Chrome で入力テキスト要素からフォーカスの境界線を削除するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。