¿Cuál es la diferencia entre: focus y: active?

¿Cuál es la diferencia entre las :focusy :activepseudo-clases?

:focusy :activeson dos estados diferentes.

• :focus representa el estado cuando el elemento está actualmente seleccionado para recibir entrada y
• :active representa el estado cuando el elemento está siendo activado actualmente por el usuario.

Por ejemplo, digamos que tenemos a <button>. El <button>no tendrá ningún estado para empezar. Simplemente existe Si solíamos Tabdarle "enfoque" al <button>, ahora entra en su :focusestado. Si luego hace clic (o presiona space), hace que el botón entre en su :activeestado ( ).

En esa nota, cuando haces clic en un elemento, le das foco, lo que también cultiva la ilusión de que :focusy :activeson lo mismo. Ellos no son los mismos. Cuando se hace clic, el botón está en :focus:activeestado.

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

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

Fuente: Pseudo-clases CSS

Hay cuatro casos.

1. Por defecto, activo y foco están apagados.
2. Cuando tabulas para desplazarte por elementos enfocables , ingresarán :focus(sin estar activos).
3. Cuando hace clic en un elemento no enfocable , ingresa :active(sin foco).
4. Cuando hace clic en un elemento enfocable , ingresa :active:focus(activo y enfoca 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 la página se carga, ambos están en el caso 1. Al presionar la pestaña, enfocará el segundo div y verá que muestra el caso 2. Cuando hace clic en el primer div, ve el caso 3. Cuando hace clic en el segundo div, ve el caso 4 .

Si un elemento es enfocable o no es otra pregunta . La mayoría no son por defecto. Sin embargo, es seguro asumir <a>, <input>, <textarea>son enfocable por defecto.

: el foco es cuando un elemento puede aceptar entradas: el cursor en un cuadro de entrada o un enlace al que se ha tabulado.

: 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 suelta.

Activo es cuando el usuario activa ese punto (como hacer clic con el mouse, si usamos la pestaña de campo a campo no hay señal del estilo activo. Tal vez hacer clic necesita más tiempo, solo intente mantener presionado el botón en ese punto), el enfoque se produce después 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"/>

El enfoque solo se puede dar con la entrada del teclado, pero un elemento se puede activar con ambos, un mouse o un teclado.

Si uno usara: centrarse en un enlace, la regla de estilo solo se aplicaría presionando un botón en el teclado.

El uso de "foco" dará a los usuarios del teclado el mismo efecto que los usuarios del mouse cuando se desplazan con el mouse. Se necesita "Activo" para obtener el mismo efecto en Internet Explorer.

La realidad es que estos estados no funcionan como deberían para todos los usuarios. No usar los tres selectores crea problemas de accesibilidad para muchos usuarios de solo teclado que físicamente no pueden usar un mouse. Los invito a tomar el desafío #nomouse (nomouse dot org).