¿Cuál es la diferencia entre: foco y: activo?

Question

¿Cuál es la diferencia entre las pseudo-clases :focus y :active?

Answer 1

:focus y :active son dos estados diferentes.

:focus representa el estado cuando el elemento es el elemento actualmente seleccionado para recibir la entrada de los dispositivos de entrada (teclado). :active representa el estado cuando el elemento está siendo activado por el usuario.

Pongamos esto en perspectiva con un ejemplo. Digamos que tenemos un <button>. El <button> no tendrá ningún estado para comenzar. Simplemente existe. Si usamos Tab para dar "foco" al <button>, ahora entra en su estado :focus. Si luego hace clic (o presiona espacio), luego hace que el botón ingrese su estado (:active).

En esa nota, cuando haces clic en un elemento, le das el foco, que también cultiva la ilusión de que :focus y :active son lo mismo. No son lo mismo. Al hacer clic, el botón está en estado :focus:active.

Un ejemplo:

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

edit: jsfiddle

Answer 2

: foco es cuando un elemento puede aceptar entrada: el cursor en un cuadro de entrada o en un enlace al que se ha asignado una pestaña.

: activo es cuando un elemento está siendo activado por un usuario - el tiempo entre cuando un usuario presiona un botón del mouse y luego lo libera.

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 

Fuente: CSS Pseudo-classes

Answer 4

Focus sólo puede ser dada por la entrada de teclado, sino un elemento puede ser activado por tanto, un ratón o un teclado.

Si se utiliza: centrarse en un enlace, la regla de estilo solo se aplicaría al presionar un botón en el teclado.

Answer 5

Activo es cuando el usuario activa ese punto (Al igual que al hacer clic en el mouse, si usamos tabulación de campo a campo no hay ningún signo del estilo activo. Tal vez haga clic necesite más tiempo, simplemente mantenga presionada la tecla en ese punto), el enfoque se produce después de que el punto está activado. Prueba esto:

<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

El uso de "enfoque" dará a los usuarios de teclado el mismo efecto que los usuarios de ratón se obtiene cuando se ciernen con un ratón. "Activo" es necesario para obtener el mismo efecto en Internet Explorer.

La realidad es que estos estados no funcionan como deberían para todos los usuarios. Si no se utilizan los tres selectores, se crean problemas de accesibilidad para muchos usuarios que solo usan teclados y que no pueden usar el mouse físicamente. Los invito a tomar el desafío #nomouse (nomouse dot org).

Answer 7

Hay cuatro casos.

1. Por defecto, active y focus están desactivados.
2. Cuando pestaña para desplazarse por elementos enfocables, entrarán en :focus (sin activo).
3. Cuando clic en un elemento de no centrada, entra :active (sin foco).
4. Cuando haga clic en en un elemento enfocable ingrese :active:focus (activo y enfoque simultáneamente).

Ejemplo:

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

Cuando se carga la página ambos son en el caso 1. Cuando se pulsa la pestaña que se centrará la segunda div y ver que exhiben el caso 2. Cuando haces clic en el primer div, ves el caso 3. Cuando haces clic en el segundo div, ves el caso 4.

---

Si un elemento es enfocable o no es another question. La mayoría no son por defecto. Pero es seguro asumir que <a>, <input>, <textarea> son enfocables por defecto.