CSS : seletor de foco
Exemplo
Selecione e estilize um campo de entrada quando ele estiver em foco:
input:focus
{
background-color: yellow;
}
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O :focus
seletor é usado para selecionar o elemento que tem foco.
Dica: O seletor :focus é permitido em elementos que aceitam eventos de teclado ou outras entradas do usuário.
Versão: | CSS2 |
---|
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao seletor.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
Sintaxe CSS
:focus {
css declarations;
}
Mais exemplos
Exemplo
Quando um <input type="text"> fica em foco, altere gradualmente a largura de 100px para 250px:
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
Páginas relacionadas
Tutorial CSS: Pseudoclasses CSS