Qual è la differenza tra: messa a fuoco e: attivo?

Question

Qual è la differenza tra le pseudo-classi :focus e :active?

Answer 1

:focus e :active sono due stati differenti.

:focus rappresenta lo stato quando l'elemento è l'elemento attualmente selezionato per ricevere input dai dispositivi di input (tastiera). :active rappresenta lo stato in cui l'elemento è attualmente attivato dall'utente.

Mettiamolo in prospettiva con un esempio. Diciamo che abbiamo un <button>. Lo <button> non avrà nessuno stato per cominciare. Esiste solo. Se utilizziamo la scheda Tab per dare "focus" allo <button>, ora entra nello stato :focus. Se si fa clic (o si preme spazio), si fa quindi entrare nel relativo stato (:active).

In quella nota, quando si fa clic su un elemento, si dà fuoco, che coltiva anche l'illusione che :focus e :active siano gli stessi. Non sono la stessa cosa. Quando si fa clic sul pulsante si trova nello stato :focus:active.

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

modifica: jsfiddle

Answer 2

: lo stato attivo è 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 - il tempo che intercorre tra quando un utente preme un pulsante del mouse e lo rilascia.

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 

Fonte: CSS Pseudo-classes

Answer 4

fuoco può essere data solo da input da tastiera, ma un elemento può essere attivato da entrambi, un mouse o una tastiera.

Se si potrebbe usare: focus su un link, la regola di stile si applicherebbe solo con la pressione di un bottone sulla tastiera.

Answer 5

Attivo è quando l'utente che attiva quel punto (come il clic del mouse, se usiamo la scheda da campo a campo non c'è alcun segno dallo stile attivo. Forse facendo clic ha bisogno di più tempo, basta provare a tenere premuto su quel punto), la messa a fuoco è avvenuta dopo l'attivazione del punto. 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"/> 

Answer 6

Utilizzando "focus" darà agli utenti della tastiera lo stesso effetto che gli utenti del mouse ottengono quando si librano con un mouse. "Active" è necessario per ottenere lo stesso effetto in Internet Explorer.

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

Answer 7

ci sono quattro casi.

1. Per impostazione predefinita, attivo e attivo sono entrambi disattivati.
2. Quando si scheda per scorrere attraverso gli elementi di messa a fuoco , immettere :focus (senza attivo).
3. Quando si fa clic su un elemento non attivabile, entra :active (senza messa a fuoco).
4. Quando si fare clic su su un elemento di messa a fuoco immette :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 viene caricata entrambi sono nel caso in cui 1. Quando si preme scheda si concentrerà la seconda div e vederlo esporre caso 2. Quando fai clic sul primo div, vedi caso 3. Quando fai clic sul secondo div, vedi il caso 4.

---

Se un elemento è focalizzabile o meno è another question. La maggior parte non sono di default. Tuttavia, si può presumere che <a>, <input>, <textarea> siano attivabili per impostazione predefinita.