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

Respuestas:

413

: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

Andrew Moore
fuente
2
También tenga en cuenta que puede obtener el elemento enfocado utilizando la document.activeElementpropiedad con un nombre confuso , aunque debe estar en un intento de captura porque IE8 puede lanzar una excepción. Y tenga en cuenta que las versiones anteriores de los navegadores pueden tratar: activo y: enfoque diferente. function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
robocat
66
He creado un JSFiddle de su ejemplo aquí: jsfiddle.net/NCwvj Pruebas en Chrome (v24) He notado que al hacer clic en el botón solo se invoca el :activeestado
Zaki Aziz
3
Nit: el orden de enfoque y activo afecta el estado de un botón HTML si no hay: activo: estado de enfoque - Poner: estado activo después de: enfoque, obtengo los cambios activos cuando presiono la pestaña y presiono el espacio. Si: el foco es el último, nunca veo el estado activo.
Matt Gaunt el
@GauntFace, ¿qué navegador estás usando? En Chrome, el orden de su declaración focusy activeno importa. Solo importa cuando se contradicen entre sí, por ejemplo, color:redy color:blue(entonces el último gana).
Pacerier
Pregunta relacionada y la respuesta, basada en esta: stackoverflow.com/a/48597351/5587480 . Desde mi punto de vista, muy fácil de entender
john cj
59
: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

Rubens Farias
fuente
10
Si bien está relacionado, esto no responde a la pregunta
Gregor Weber
66
@GregorWeber expone la diferencia al mostrar definiciones
Kamil Kiełczewski
1
Probablemente lo sepa, pero si los define en ese orden, los visitedenlaces no cambiarán de estilo cuando se ciernen o se haga clic en ellos porque su "visita" anulará las otras pseudo-clases. LVHFA es el orden que la mayoría de las personas querrá usar en la mayoría de los casos. No estoy seguro de por qué incluiste lang...
Mentalista
22

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.

James Lawson
fuente
Gracias por señalar cómo los elementos pueden tener :activepero no :focus. Esa es una cosa que me confundió acerca de que las otras respuestas no abordaron.
B-Stewart
7

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

Emily
fuente
2
¡Hola! ¿Hay un estado para "actualmente cliqueado"? Digamos que hay tres enlaces en el menú de navegación, ¿cómo se consigue mantener un cierto color cuando actualmente "está" en el enlace? para mostrarle al usuario dónde se encuentra actualmente. as: active solo funciona mientras se haga clic en el enlace (en este caso), pero cambia de nuevo al soltar el botón del mouse.
Kizer Yakuza
0

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"/>
Anggie Aziz
fuente
-3

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.

Volker Ackermann
fuente
1
:focusno funciona así El área de texto que estoy escribiendo actualmente tiene foco porque hice clic en un botón. También puede perder y restaurar el foco haciendo clic fuera de él y nuevamente dentro. En solo un segundo, voy a enfocar el botón Agregar comentario a la derecha haciendo clic en él. Todo esto sin entrada de teclado causando foco.
Joel Mellon
Si no puede enfocarse en un enlace, es simplemente porque un enlace no puede enfocarse a menos que lo coloque en un ancla o agregue un atributo tabindex. Pero puede enfocar elementos DOM como divs o entradas.
Alex
-5

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

AMG
fuente
1
: hover y: focus no son lo mismo. : hover es un estado específico y: focus es un estado específico. Es un poco confuso y engañoso equipararlos.
Garry Polley
1
No dudo de tu experiencia. Estoy tratando de señalar que: hover y: active no son lo mismo. Y es confuso para las personas más nuevas en la web y la accesibilidad cuando se expresa de manera tan simple como: hover es aproximadamente igual a: activo para el uso del teclado. Agradezco la respuesta, pero tal vez un poco más de profundidad ayudaría.
Garry Polley
¡Por supuesto que no son lo mismo! No dije que fueran aproximadamente iguales. (Lea mis publicaciones nuevamente). Estoy hablando de la diferencia entre usar un mouse y un teclado para realizar la misma tarea. Estoy diciendo que debe usarlos todos para dar a ambos grupos de usuarios la misma experiencia. De lo contrario, solo los usuarios del teclado que físicamente no pueden usar un mouse tendrán dificultades para ver dónde han tabulado en una página. Esto crea un problema de accesibilidad para estas personas al navegar por la página.
AMG