web-dev-qa-db-ja.com

：focus CSS状態はボタンにどのような値を追加しますか？

洗練されたユーザーエクスペリエンスを作成するには、:hoverが必要であることは誰もが知っています。これにより、ユーザーは要素のクリックオプションを認識できます。

ボタンに:focusはどのような値を追加しますか？ユーザーは、実際にボタンを押したというフィードバックを受け取ります。しかし、私のすべてのプロジェクトは通常、「読み込み中」、「送信中」など、アクションが実行中であることを示す他のインジケーターを表示します。

ボタンの:focusは通常、ほんの一瞬だけ表示されるため、本当に必要ですか？

formsbuttonscssfocus
27
ewooycom

誰もがマウスを使用するわけではありません。

フォーカスは、フォーム/ページのインタラクティブな要素間を移動するためにTabキーを押す必要があるユーザーにとって不可欠です。ボタンの：focusスタイルを作成すると（理想的には、他の要素の：focusと同様）、ユーザーはテキスト入力を入力しなくなったこと、およびReturnキーを押すと送信ボタンがアクティブであることを確認できます。

マウスを使用しているユーザーでも、Tabキーを押して入力フィールドを移動し、Enterキーを押してフォームを送信できると便利です。多くの場合、データ入力に携わる人々は、1日に数百回入力されるフォームのtype-Tab-type-Tab-Enterのようなパターンを作成します。便利な：focusスタイルを使用すると、適切なタイミングでEnterキーを押していることがわかります。

55
Nathan Rabe

フォーカスはフォーム要素に使用されます。これは、たとえばテキスト入力ボックスをクリックしたことを示しており、その要素が選択されている限り、onFocusのままです。

編集：送信ボタンの場合、マウスボタンを押している間は、「ハイライト」または表示するために何をしても：focusが存在します。これの使用例はより制限されています。

編集2：（コードをコメントに入れることができませんでした）

ボタンに：focusを使用できます。

<style>
  input:focus {
  background-color: #FFCC00;  // yellow
</style>


<input type="text">
<input type="text">
<input type="submit">

Nathan Rabeの回答に記載されているのと同じ理由で使用します。古いスタイルのDOSタブに慣れ、インターフェースに入り、新しいインターフェースに慣れる習慣を持っている人がたくさんいます。

4
Mayo