[解決済み】Safari/Chromeのtextinput/textareaのグローを削除する。
2022-03-25 10:54:57
質問
テキスト入力/テキストエリアをクリックしたときのデフォルトの青と黄色の輝きを、CSSを使って取り除くことは可能でしょうか?
解決方法を教えてください。
編集(11年後)。どの要素がアクティブかを示すフォールバックを提供するのでなければ、この方法は使わないでください。そうでなければ、これは本質的にドキュメント内のどの要素がフォーカスを持つかを示す表示を削除してしまうので、アクセシビリティに害を及ぼします。キーボードを使う人が、どの要素にフォーカスがあるのかわからなくなることを想像してみてください。ここでは、アクセシビリティを美観に優先させましょう。
textarea, select, input, button { outline: none; }
しかし、グロー/アウトラインを維持することは、ユーザーが現在どの要素がフォーカスされているかを確認するのに役立つため、アクセシビリティにとって実際に有益であると主張されています。
また、疑似要素 ':focus' を使用すると、ユーザーが入力項目を選択したときのみ、その入力項目をターゲットにすることができます。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] ChromeでCSSカスタムスタイルのボタンから青枠を削除する
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] cssによる波状の形状
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] リスト項目にマウスを置いたときに、カーソルを手の形に変えるには?
-
[解決済み] CSSのdisplayプロパティで遷移する
-
[解決済み] Bootstrapの列をすべて同じ高さにするにはどうしたらいいですか?
-
[解決済み] .css()関数で追加したスタイルを削除するにはどうしたらいいですか?
-
[解決済み] リンクから青いアンダーラインを削除する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 他のブラウザが画像を読み込むときに、Chromeがエラー **Failed to load resource: net::ERR_NAME_NOT_RESOLVED** を発生させる。
-
[解決済み】divの重なりについて
-
[解決済み] "セレクタ(CSS)にIDを使うな "なら、IDの代わりに何を使えばいい?
-
[解決済み] リンクにアニメーションGIFを表示し、ホバーとリセットで再生する方法
-
[解決済み] DjangoのCSSが更新されない
-
[解決済み] Bootstrap 4のclass="mb-0 "とは何ですか?
-
[解決済み] CSSで0を指定する場合、明示的に単位を表記するべきか、省略するべきか。
-
[解決済み] CSS 不透明度 - 背景色
-
[解決済み] Font Awesomeで2つ以上のアイコンを重ねる/重ねるには?
-
[解決済み] 入力・テキストフィールドの背景色