¿Cuál es la diferencia entre las :focus
y :active
pseudo-clases?
¿Cuál es la diferencia entre las :focus
y :active
pseudo-clases?
Respuestas:
:focus
y :active
son 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 :focus
estado. Si luego hace clic (o presiona space), hace que el botón entre en su :active
estado ( ).
En esa nota, cuando haces clic en un elemento, le das foco, lo que también cultiva la ilusión de que :focus
y :active
son lo mismo. Ellos no son los mismos. Cuando se hace clic, el botón está en :focus:active
estado.
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
estado
focus
y active
no importa. Solo importa cuando se contradicen entre sí, por ejemplo, color:red
y color:blue
(entonces el último gana).
: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
visited
enlaces 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
...
Hay cuatro casos.
:focus
(sin estar activos).:active
(sin foco).: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.
:active
pero no :focus
. Esa es una cosa que me confundió acerca de que las otras respuestas no abordaron.
: 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.
:focus
no 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.
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).
document.activeElement
propiedad 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) { } }