Safari/Chromeのtextinput/textareaのグローを削除する 質問する

Safari/Chromeのtextinput/textareaのグローを削除する 質問する

CSS を使用して、テキスト入力 / テキスト領域をクリックしたときに、デフォルトの青と黄色の輝きを削除することは可能でしょうか?

ベストアンサー1

編集 (11 年後): どの要素がアクティブであるかを示すフォールバックを提供するつもりがない限り、これを行わないでください。そうしないと、ドキュメント内のどの要素にフォーカスがあるかを示す表示が実質的に削除されるため、アクセシビリティが損なわれます。キーボード ユーザーであり、どの要素を操作できるかが実際にはわからないことを想像してください。ここではアクセシビリティを美観よりも優先してください。

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

ただし、グロー/アウトラインを維持すると、ユーザーが現在どの要素にフォーカスされているかを確認するのに役立つため、アクセシビリティに実際に役立つと主張されています。

疑似要素「:focus」を使用して、ユーザーが入力を選択した場合のみ入力をターゲットにすることもできます。

デモ:https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

おすすめ記事