Qual'è la differenza tra: focus e: active?

Qual è la differenza tra il :focuse :activepseudo-classi?

:focuse :activesono due stati diversi.

• :focus rappresenta lo stato in cui l'elemento è attualmente selezionato per ricevere input e
• :active rappresenta lo stato in cui l'elemento è attualmente attivato dall'utente.

Ad esempio diciamo che abbiamo un <button>. Il <button>non avrà alcuna condizione per cominciare. Esiste e basta Se usiamo Tabper "focalizzare" il <button>, ora entra nel suo :focusstato. Se poi fai clic (o premi space), fai in modo che il pulsante entri nel suo :activestato ( ).

In quella nota, quando fai clic su un elemento, gli dai la concentrazione, che coltiva anche l'illusione che :focuse :activesiano gli stessi. Non sono gli stessi. Quando si fa clic sul pulsante è nello :focus:activestato.

Un esempio:

<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 only,<br />
 where my text just turns red
</button>

modifica: jsfiddle

: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

Fonte: pseudo-classi CSS

Ci sono quattro casi.

1. Per impostazione predefinita, attivo e attivo sono entrambi disattivati.
2. Quando si esegue la scheda per scorrere gli elementi attivabili , entreranno:focus (senza attivo).
3. Quando si fa clic su un elemento non focalizzabile , entra :active(senza focus).
4. Quando si fa clic su un elemento attivabile , entra :active:focus(attivo e attivo contemporaneamente).

Esempio:

<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;
}

Quando la pagina carica entrambi sono nel caso 1. Quando si preme il tasto tab si focalizzerà il secondo div e lo si vedrà esporre il caso 2. Quando si fa clic sul primo div si vede il caso 3. Quando si fa clic sul secondo div, si vede il caso 4 .

Se un elemento è focalizzabile o meno è un'altra domanda . La maggior parte non è di default. Ma, è lecito ritenere <a>, <input>, <textarea>sono attivabile per impostazione predefinita.

: focus è quando un elemento è in grado di accettare input: il cursore in una casella di input o un collegamento a cui è stato eseguito il tab.

: attivo è quando un elemento viene attivato da un utente - l'intervallo tra il momento in cui un utente preme un pulsante del mouse e poi lo rilascia.

Attivo è quando l'utente attiva quel punto (come il clic del mouse, se utilizziamo la scheda da un campo all'altro non c'è alcun segno dallo stile attivo. Forse il clic ha bisogno di più tempo, basta provare a tenere premuto il clic su quel punto), lo stato attivo si verifica dopo il punto è attivato. Prova questo :

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

Il focus può essere dato solo dall'input da tastiera, ma un elemento può essere attivato da entrambi, un mouse o una tastiera.

Se uno usasse: concentrarsi su un collegamento, la regola di stile si applicherebbe solo premendo un pulsante sulla tastiera.

L'uso di "focus" darà agli utenti della tastiera lo stesso effetto che gli utenti del mouse ottengono quando passano il mouse con il mouse. "Attivo" è necessario per ottenere lo stesso effetto in Internet Explorer.

La realtà è che questi stati non funzionano come dovrebbero per tutti gli utenti. Non utilizzare tutti e tre i selettori crea problemi di accessibilità per molti utenti solo tastiera che non sono fisicamente in grado di usare un mouse. Ti invito a partecipare alla sfida #nomouse (nomouse dot org).