1. ホーム
  2. css

[解決済み】Safari/Chromeのtextinput/textareaのグローを削除する。

2022-03-25 10:54:57

質問

テキスト入力/テキストエリアをクリックしたときのデフォルトの青と黄色の輝きを、CSSを使って取り除くことは可能でしょうか?

解決方法を教えてください。

編集(11年後)。どの要素がアクティブかを示すフォールバックを提供するのでなければ、この方法は使わないでください。そうでなければ、これは本質的にドキュメント内のどの要素がフォーカスを持つかを示す表示を削除してしまうので、アクセシビリティに害を及ぼします。キーボードを使う人が、どの要素にフォーカスがあるのかわからなくなることを想像してみてください。ここでは、アクセシビリティを美観に優先させましょう。

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

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

また、疑似要素 ':focus' を使用すると、ユーザーが入力項目を選択したときのみ、その入力項目をターゲットにすることができます。

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