css - son - lista de atributos html

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

Question

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

Answer 1

: el foco es cuando un elemento es capaz de aceptar una entrada: el cursor en un cuadro de entrada o un enlace que ha sido tabulado 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 2

Activo es cuando el usuario está activando ese punto (al igual que hacer clic con el mouse, si usamos pestaña de campo a campo, no hay ninguna señal de estilo activo. Tal vez, hacer clic necesite más tiempo, solo intente hacer clic 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"/>

Answer 3

El enfoque solo se puede dar mediante la entrada del teclado, pero un Elemento puede activarse con ambos, un mouse o un teclado.

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

Answer 4

El uso de "enfoque" dará a los usuarios del teclado el mismo efecto que obtienen los usuarios del mouse cuando se desplazan con el mouse. "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. No usar los tres selectores crea problemas de accesibilidad para muchos usuarios que solo tienen teclado y que no pueden usar el mouse físicamente. Los invito a tomar el desafío #nomouse (nomouse dot org).

Answer 5

Hay cuatro casos.

1. Por defecto, activo y foco están ambos apagados.
2. Cuando se presiona para desplazarse por los elementos :focus , estos ingresarán :focus (sin activo).
3. Al hacer clic en un elemento no enfocable , ingresa :active (sin foco).
4. Cuando hace clic en un elemento enfocable , ingresa :active:focus (activo y enfocado 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 cargue, ambas están en el caso 1. Cuando presionas la pestaña, enfocarás el segundo div y verás el caso de exhibición 2. Cuando hagas clic en el primer div verás el caso 3. Cuando hagas clic en el segundo div, verás el caso 4 .

Si un elemento es enfocable o no es otra pregunta . La mayoría no son por defecto. Pero, es seguro asumir que <a> , <input> , <textarea> pueden enfocar de forma predeterminada.

Answer 6

: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 usuario está activando el elemento.

Por ejemplo, digamos que tenemos un <button> . El <button> no tendrá ningún estado para empezar. Simplemente existe. Si usamos Tab para darle "enfoque" al <button> , ahora entra en su :focus estado de :focus . Si luego hace clic (o presiona espacio ), entonces hace que el botón entre en su estado ( :active ).

En esa nota, cuando haces clic en un elemento, le das un enfoque, que también cultiva la ilusión de que :focus y :active son lo mismo. Ellos no son los mismos. Cuando se hace clic en el botón está en :focus:active 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>

edición: jsfiddle

Answer 7

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