Jaka jest różnica między: focus a: active?

Jaka jest różnica między :focusi :activepseudo-klas?

:focusi :activesą dwoma różnymi stanami.

• :focus reprezentuje stan, w którym element jest obecnie wybrany do odbioru danych wejściowych i
• :active reprezentuje stan, w którym element jest obecnie aktywowany przez użytkownika.

Powiedzmy na przykład, że mamy <button>. Na początku <button>nie będzie żadnego stanu. Po prostu istnieje. Jeśli użyjemy, Tababy „skupić się” na <button>, to teraz wejdzie w swój :focusstan. Jeśli następnie klikniesz (lub naciśniesz space), sprawisz, że przycisk przejdzie w :activestan ( ).

W tym pamiętać, kiedy klikniesz na element, dajesz koncentrować, który kultywuje również złudzenie, że :focusi :activesą takie same. One nie są takie same. Po kliknięciu przycisk jest w :focus:activestanie.

Przykład:

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

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

Źródło: Pseudoklasy CSS

Istnieją cztery przypadki.

1. Domyślnie aktywne i fokusowe są wyłączone.
2. Kiedy przechodzisz między zakładkami, aby przechodzić między elementami:focus aktywowanymi, wejdą one (bez aktywnych).
3. Po kliknięciu na nie aktywowana elementu , wchodzi:active (bez ostrości).
4. Po kliknięciu na zmianę ostrości elementu wchodzi on :active:focus(aktywnej i skupić się jednocześnie).

Przykład:

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

Gdy strona ładuje się, oba są w skrzynce 1. Po naciśnięciu klawisza skupisz drugi div i zobaczysz, że pokazuje wielkość liter 2. Po kliknięciu pierwszego elementu div zobaczysz wielkość liter 3. Gdy klikniesz drugi element div, zobaczysz wielkość liter 4 .

To, czy element można ustawić, czy nie, to inna kwestia . Większość nie jest domyślnie. Ale to jest bezpiecznie założyć <a>, <input>, <textarea>jest aktywowana domyślnie.

: focus ma miejsce, gdy element jest w stanie zaakceptować dane wejściowe - kursor w polu wejściowym lub łącze, które zostało tabulowane.

: aktywny jest, gdy element jest aktywowany przez użytkownika - czas pomiędzy naciśnięciem przycisku myszy a zwolnieniem go.

Aktywny jest, gdy użytkownik aktywuje ten punkt (Podobnie jak kliknięcie myszą, jeśli używamy tabulacji z pola na pole, nie ma znaku z aktywnego stylu. Może kliknięcie wymaga więcej czasu, po prostu przytrzymaj ten punkt), fokus jest wykonywany po punkt jest aktywowany. Spróbuj tego :

<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"/>

Fokus można uzyskać tylko za pomocą klawiatury, ale element można aktywować zarówno myszą, jak i klawiaturą.

Jeśli użyjesz: skoncentruj się na łączu, reguła stylu będzie obowiązywać tylko po naciśnięciu klawisza na klawiaturze.

Użycie „skupienia” da użytkownikom klawiatury taki sam efekt, jaki uzyskują użytkownicy myszy po najechaniu myszką. „Aktywny” jest potrzebny, aby uzyskać ten sam efekt w Internet Explorerze.

W rzeczywistości stany te nie działają tak, jak powinny dla wszystkich użytkowników. Nieużywanie wszystkich trzech selektorów stwarza problemy z dostępem dla wielu użytkowników korzystających wyłącznie z klawiatury, którzy fizycznie nie są w stanie używać myszy. Zapraszam do podjęcia wyzwania #nomouse (nomouse dot org).