web-dev-qa-db-ja.com

：focusと：activeの違いは何ですか？

:focusと:active擬似クラスの違いは何ですか？

csscss-selectorspseudo-class
244
Jitendra Vyas

:focusと:activeは2つの異なる状態です。

  • :focusは、入力を受け取るために要素が現在選択されているときの状態を表し、
  • :activeは、要素がユーザーによって現在アクティブ化されているときの状態を表します。

たとえば、<button>があるとします。 <button>には、最初に状態がありません。ただ存在します。使用する場合 Tab <button>に「フォーカス」を与えるために、:focus状態に入ります。次に、（または space）、ボタンを（:active）状態にします。

そのメモでは、要素をクリックすると、その要素にフォーカスが与えられます。これにより、:focusと:activeが同じであるという錯覚が生まれます。 これらは同じではありません。クリックすると、ボタンは:focus:active状態になります。

例：

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused, where my text just turns red
</button>

編集： jsfiddle

354
Andrew Moore
:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

ソース： CSS擬似クラス

53
Rubens Farias

4つのケースがあります。

  1. デフォルトでは、アクティブとフォーカスは両方ともオフです。
  2. tabを繰り返してfocusable elementsを選択すると、:focus（アクティブなし）が入力されます。
  3. クリックで非フォーカス可能要素を選択すると、:active（フォーカスなし）に入ります。
  4. クリックをfocusable elementにすると、:active:focus（アクティブとフォーカスを同時に）に入ります。

例：

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

ページが読み込まれると、両方がケース1になります。タブを押すと、2番目のdivにフォーカスしてケース2が表示されます。最初のdivをクリックすると、ケース3が表示されます。 。

要素がフォーカス可能かどうかは 別の質問 です。ほとんどはデフォルトではありません。ただし、<a>、<input>、<textarea>はデフォルトでフォーカス可能であると想定しても安全です。

18
James Lawson

：focusは、要素が入力を受け入れることができる場合です-入力ボックス内のカーソルまたはタブされたリンク。

：activeは、ユーザーが要素をアクティブにするとき-ユーザーがマウスボタンを押してから離すまでの時間です。

5
Emily

アクティブとは、ユーザーがそのポイントをアクティブにしたときです（マウスクリックのように、フィールド間でタブを使用する場合、アクティブなスタイルからのサインはありません。クリックにはもっと時間が必要です。ポイントがアクティブになります。これを試して ：

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>
0
Anggie Aziz