web-dev-qa-db-fra.com

Quelle est la difference entre: focus et: active?

Quelle est la différence entre les pseudo-classes :focus et :active?

csscss-selectorspseudo-class
252
Jitendra Vyas

:focus et :active sont deux états différents.

  • :focus représente l'état dans lequel l'élément est actuellement sélectionné pour recevoir une entrée et
  • :active représente l'état actuel de l'activation de l'élément par l'utilisateur.

Par exemple, disons que nous avons un <button>. Le <button> n'aura pas d'état pour commencer. Ça existe. Si on utilise Tab pour donner "focus" au <button>, il entre maintenant dans son état :focus. Si vous cliquez ensuite (ou appuyez sur space), vous obligez le bouton à entrer dans son état (:active).

Sur cette note, lorsque vous cliquez sur un élément, vous lui donnez le focus, ce qui entretient également l’illusion que :focus et :active sont identiques. Ce ne sont pas les mêmes. Lorsque vous cliquez dessus, le bouton est dans l'état :focus:active.

Un exemple:

<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

368
Andrew Moore
: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

Source: CSS Pseudo-classes

53
Rubens Farias

Il y a quatre cas.

  1. Par défaut, actif et focus sont tous deux désactivés.
  2. Lorsque vous cliquez sur l'onglet pour parcourir les éléments qui peuvent être mis au point , ils entreront :focus (sans actif).
  3. Lorsque vous cliquez sur sur un élément non activable , il entre :active (sans mise au point).
  4. Lorsque vous cliquez sur sur un élément focalisable , il entre :active:focus (actif et focus simultanément).

Exemple: 

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

Lorsque la page se charge, les deux sont dans la casse 1. Lorsque vous appuyez sur la touche Tab, vous focalisez la deuxième div et la voyons comme cas 2. Lorsque vous cliquez sur la première div, vous voyez la casse 3. Lorsque vous cliquez sur la deuxième div, vous voyez la cas 4 .

Si un élément est focalisable ou non, c'est autre question . La plupart ne sont pas par défaut. Mais, on peut supposer que <a>, <input>, <textarea> sont activables par défaut.

19
James Lawson

: focus est lorsqu'un élément est capable d'accepter une entrée - le curseur dans une zone de saisie ou un lien qui a été tabulé.

: actif est lorsqu'un élément est activé par un utilisateur - le délai entre le moment où un utilisateur appuie sur un bouton de la souris, puis le relâche.

5
Emily

Actif, c’est lorsque l’utilisateur active ce point (comme un clic de souris, si vous utilisez une tabulation de champ à champ, il n’ya pas de signe de style actif. Peut-être que cliquer nécessite plus de temps, essayez de maintenir le clic enfoncé sur ce point). le point est activé. Essaye ça :

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