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

Question

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

Answer 1

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

:focusは、要素が入力デバイス（キーボード）から入力を受け取るように現在選択されている要素であるときの状態を表します。 :activeは、要素が現在ユーザーによってアクティブ化されているときの状態を表します。

例をあげてみましょう。たとえば、<button>があるとします。 <button>にはどのような状態もありません。ただ存在するだけです。 タブを使用して<button>に「フォーカス」を付けると、現在は:focusの状態になります。その後、をクリックするか、スペースを押すと、ボタンは（: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

Answer 2

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

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

Answer 3

: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 Pseudo-classes

Answer 4

フォーカスのみキーボード入力によって与えられることができるが、要素が両方の、マウスやキーボードによって活性化することができます。

リンク上でフォーカスを使用する場合、スタイルルールはキーボードのボタンを押すだけで適用されます。

Answer 5

アクティブなのは、ポイントをアクティブにするときです（マウスクリックのように、フィールド間のタブを使用するとアクティブなスタイルからのサインはありません）。ポイントがアクティブ化された後でフォーカスが行われます。これを試してみてください：「フォーカス」を使用して

<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"/> 

Answer 6

は、キーボードのユーザーに、彼らはマウスで置くと、マウスのユーザーが得る同じ効果が得られます。 Internet Explorerで同じ効果を得るには、「アクティブ」が必要です。

実際には、これらの状態はすべてのユーザーにとって必要なように機能しません。 3つのセレクタをすべて使用すると、物理的にマウスを使用できないキーボードのみの多くのユーザーにとって、アクセシビリティの問題が生じます。私はあなたに#nomouseチャレンジ（nomouse dot org）を取るように勧めます。

Answer 7

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

1. デフォルトでは、アクティブとフォーカスは両方ともオフです。
2. タブからにフォーカスを当てる要素を循環させると、:focus（アクティブなし）と入力されます。
3. のフォーカス不可要素のをクリックすると、フォーカスがない状態で:activeと入力されます。
4. フォーカス可能な要素にあるをクリックすると、:active:focusと入力されます（アクティブとフォーカスが同時に発生します）。

例：

div:focus { background: green; } div:active { color: orange; } div:focus:active { font-weight: bold; } 

あなたは第二のdivを集中し、それがケース2を示す表示されます]タブを押すとページがロードの両方がケース1である

---

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

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

。最初のdivをクリックすると、ケース3が表示されます。2番目のdivをクリックすると、ケース4が表示されます。

---

要素がフォーカス可能かどうかはanother questionです。ほとんどはデフォルトではありません。しかし、<a>,<input>、<textarea>がデフォルトでフォーカス可能であると仮定することは安全です。