Qual é a diferença entre: focus e: active?

275

Qual é a diferença entre as :focuse :activepseudo-classes?

Jitendra Vyas
fonte

Respostas:

413

:focuse :activesão dois estados diferentes.

  • :focus representa o estado em que o elemento está atualmente selecionado para receber entrada e
  • :active representa o estado em que o elemento está sendo ativado atualmente pelo usuário.

Por exemplo, digamos que temos um <button>. O <button>não terá nenhum estado para começar. Apenas existe. Se usamos Tabpara dar "foco" ao <button>, ele agora entra em seu :focusestado. Se você clicar (ou pressionar space), fará com que o botão entre no :activeestado ( ).

Na mesma nota, quando você clica em um elemento, você dá a ele se concentrar, o que também cultiva a ilusão de que :focuse :activesão os mesmos. Eles não são os mesmos. Quando clicado, o botão está no :focus:activeestado.

Um exemplo:

<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
fonte
2
Observe também que você pode obter o elemento focado usando a document.activeElementpropriedade denominada de maneira confusa , embora precise estar em uma captura de tentativa, porque o IE8 pode gerar uma exceção. E esteja ciente de que as versões mais antigas dos navegadores podem tratar: ativo e: foco diferente. function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }
robocat
6
Eu criei um jsFiddle do seu exemplo aqui: jsfiddle.net/NCwvj Testing em cromo (v24) Tenho notado que clicar no botão só invoca o :activeestado
Zaki Aziz
3
Nit: a ordem de foco e ativo afeta o estado de um botão HTML se não houver: ativo: estado de foco - Colocando: estado ativo após: foco, eu recebo as alterações ativas quando clico na guia e no espaço. Se: o foco é o último, nunca vejo o estado ativo.
precisa
@GauntFace, qual navegador você está usando? No Chrome, a ordem da sua declaração focuse activenão importa. Só importa quando eles se contradizem, por exemplo, color:rede color:blue(depois o último vence).
Pacerier
Pergunta relacionada e a resposta, com base nesta: stackoverflow.com/a/48597351/5587480 . Do meu ponto de vista, muito 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

Fonte: Pseudo-classes CSS

Rubens Farias
fonte
10
Enquanto relacionado, isso não responder à pergunta
Gregor Weber
6
@GregorWeber que expor diferença, mostrando definições
Kamil Kiełczewski
1
Você provavelmente sabe disso, mas se você os definir nessa ordem, os visitedlinks não mudarão de estilo quando pairados ou clicados, porque sua "visitação" substituirá as outras pseudo-classes. LVHFA é a ordem que a maioria das pessoas deseja usar na maioria dos casos. Não sei por que você incluiu lang...
Mentalist
22

Existem quatro casos.

  1. Por padrão, ativo e foco estão desativados.
  2. Quando você guia para percorrer os elementos focalizáveis , eles entram :focus(sem ativo).
  3. Quando você clica em um elemento:active não focalizável , ele entra (sem foco).
  4. Quando você clica em um elemento:active:focus focalizável, ele entra (ativo e focaliza simultaneamente).

Exemplo:

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

Quando a página carrega, ambos estão no caso 1. Quando você pressiona a tecla tab, você focaliza a segunda div e a vê exibir a caixa 2. Quando você clica na primeira div, você vê o caso 3. Quando você clica na segunda div, você vê o caso 4 .


Se um elemento é focável ou não é outra questão . A maioria não é por padrão. Mas, é seguro assumir <a>, <input>, <textarea>são focusable por padrão.

James Lawson
fonte
Obrigado por apontar como os elementos podem ter, :activemas não o são :focus. Essa é uma coisa em que fiquei confuso sobre o fato de as outras respostas não abordarem.
B-Stewart
7

: focus é quando um elemento é capaz de aceitar entrada - o cursor em uma caixa de entrada ou em um link que foi tabulado.

: active é quando um elemento está sendo ativado por um usuário - o tempo entre o momento em que um usuário pressiona um botão do mouse e o libera.

Emily
fonte
2
Oi! Existe um estado para "clicado no momento"? Digamos que haja três links no menu de navegação. Como você consegue manter uma determinada cor quando atualmente está "ligado" no link? para mostrar ao usuário onde ele está atualmente. as: active funciona apenas enquanto o link (neste caso) está sendo clicado, mas muda novamente com a liberação do botão do mouse.
Kizer Yakuza
0

Ativo é quando o usuário que está ativando esse ponto (como clicar no mouse, se usarmos a guia campo a campo, não há sinal do estilo ativo. Talvez o clique precise de mais tempo, tente manter o botão pressionado nesse ponto), o foco ocorre depois o ponto está ativado. Tente o seguinte:

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

O foco só pode ser dado pela entrada do teclado, mas um Elemento pode ser ativado por ambos, um mouse ou um teclado.

Se alguém usasse: foco em um link, a regra de estilo seria aplicada apenas pressionando um botão no teclado.

Volker Ackermann
fonte
1
:focusnão funciona assim. A área de texto em que estou digitando atualmente tem foco porque cliquei em um botão. Ele também pode perder e restaurar o foco clicando nele e novamente nele. Em apenas um segundo, focarei o botão Adicionar comentário à direita clicando nele. Tudo isso sem a entrada do teclado causando foco.
Joel Mellon
Se você não pode focar em um link, é simplesmente porque um link não pode ser focado, a menos que você o coloque em uma âncora ou adicione um atributo tabindex. Mas você pode focar elementos DOM como divs ou entradas.
Alex
-5

O uso do "foco" dará aos usuários do teclado o mesmo efeito que os usuários do mouse quando passam o mouse. "Ativo" é necessário para obter o mesmo efeito no Internet Explorer.

A realidade é que esses estados não funcionam como deveriam para todos os usuários. O não uso dos três seletores cria problemas de acessibilidade para muitos usuários que usam apenas o teclado e que são fisicamente incapazes de usar o mouse. Convido você a aceitar o desafio #nomouse (nomouse dot org).

AMG
fonte
1
: hover e: focus não são a mesma coisa. : hover é um estado específico e: focus é um estado específico. É um pouco confuso e enganador equacioná-los.
precisa saber é o seguinte
1
Não estou duvidando da sua experiência. Estou tentando salientar que: hover e: active não são a mesma coisa. E é confuso para as pessoas mais novas na Web e acessibilidade quando colocadas de maneira simples: hover é aproximadamente igual a: active para uso do teclado. Agradeço a resposta, mas talvez um pouco mais de profundidade ajudaria?
precisa saber é o seguinte
Claro que não são a mesma coisa! Eu não disse que eles eram aproximadamente os mesmos. (Leia minhas postagens novamente.) Estou falando da diferença entre usar o mouse e o teclado para realizar a mesma tarefa. Estou dizendo que você precisa usar todos eles para oferecer aos dois conjuntos de usuários a mesma experiência. Caso contrário, somente os usuários com teclado fisicamente incapazes de usar o mouse terão dificuldade em ver para onde foram tabulados em uma página. Isso cria um problema de acessibilidade para essas pessoas na navegação na página.
AMG