A :focuspseudo classe em CSS é usada para definir o estilo de um elemento que é atualmente direcionado pelo teclado ou ativado pelo mouse. Aqui está um exemplo:
textarea:focus ( background: pink; )Qualquer elemento (mais comumente s e s) estão em “foco” quando são selecionados e prontos para inserir texto (como quando um cursor está piscando). Os usuários do mouse podem clicar neles (ou em algo relacionado label) para focar e os usuários do teclado podem usar TAB para eles.
“Tabbing”
Outro uso da :focuspseudo classe é “tabular” os elementos. Muitos navegadores têm um estado de foco padrão para a seleção da guia, que é um contorno pontilhado. É muito fácil de remover, mas certifique-se de substituí-lo por uma alternativa adequada se o fizer.
s, s, s, e textareas todos têm o :focus estado por padrão, mas você pode dar um estado de foco de qualquer elemento em HTML. Os atributos contenteditable e tabindexfuncionam para isso, como neste exemplo:
Relacionado
Artigo em 12 de maio de 2017A pseudo classe `: focus-within`
Chris Coyier
Suporte para navegador
Todos os navegadores suportam o uso básico de :focus.