A pseudo-classe focus
Publicado em: 2006-03-23 — 34.392 visualizacoes
A pseudo-classe :focus foi introduzida nas CSS 2 e destina-se a aplicar estilos ao elemento HTML que receba o foco.
A sintaxe da regra de estilo é:
E:focus {propriedade:valor;} Onde E é um elemento HTML qualquer.
O emprego mais comum desta pseudo-classe é em campos do tipo input para textos e campos do tipo textarea, em formulários.
Vamos a um exemplo prático tomando por base o formulário de busca deste Blog.
Busca no Blog
Eu uso as seguintes regras de estilos para todos os campos de formulário input para textos e campos do tipo textarea, neste Blog:
input:focus, textarea:focus {
background: #ffe; /* Fundo amarelo palha */
border: 2px solid #c30; /* Borda vermelha de 2px */
}
textarea:focus {
border-width: 1px; /* Redefine a borda para 1px
se o campo for textarea */
}
Isto significa que se você entrar com o cursor (dar o foco) em qualquer campo de texto existente em qualquer formulário do Blog, inclusive neste aí em cima que tomei como base para o exemplo prático, o campo assumirá um fundo na cor amarelo palha e uma borda vermelha.
Quer ver? Entre com o cursor no campo de busca aí em cima (dê foco ao campo).
Funcionou ? Ótimo! você está, usando um navegador que entende a pseudo classe :focus (Firefox, Opera, Netscape, Mozilla, etc)
Não funcionou ? Bom! você está usando um navegador que não entende a pseudo classe :focus (Internet Explorer versão 6 ou menor)
Nota: Se você sabe se o Internet Explorer Beta 2 Preview – lançado em 2006-03-20 (três dias atrás) suporta ou não esta pseudo-classe, poste nos comentários, indicando o link onde você leu a respeito. Eu ainda não achei nada sobre suporte para :focus
Para funcionar no IE
Para fazer funcionar no IE teremos que lançar mão de Javascript aplicando os disparadores de evento onfocus e onblur no elemento input para definir uma classe de estilo neste elemento.
Assim:
<input type="text" value="" name="busca" id="" onfocus="this.className='muda'" onblur="this.className=''" />
Onde a classe .muda contém as regras de estilos para o foco.
Isto é:
.muda {
background: #ffe; /* Fundo amarelo palha */
border: 2px solid #c30; /* Borda vermelha de 2px */
}
Página para teste
Preparei uma página para você testar toda esta teoria de emprego da pseudo-classe :focus e do Javascript para o IE.
Divirta-se!
Importante: Eu não usei a solução com Javascript no Blog, portanto se você usa IE não verá os efeitos nos meus formulários.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-03-23 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/03/23/apcfocus/trackback no seu site.
Muito bom, adorei este recurso !
Oh Grande Mestre…
Eu gostaria de saber se existe alguma pseudo-clsse css
que age no momento em que o elemento perde o foco???
Mt obg por td!!
Eu me envolvo mais com programação, mas tenho que fazer meio que de tudo (mesmo que não tivesse, eu gosto de saber um pouco de tudo) e essa tecnica que você ensina nesse posto é excelente, leve, não precisa de JS (salvo para o IE, como sempre, rsrs) .
Maurício,
Grande artigo, esse efeito é bem legal mesmo, pena que não funciona no IE 6 e + antigos, tomara que na versão 7 eles tenham aperfeiçoado para reconhecer essa pseudoclasse, é muito interessante.
grande abraço e parabéns pelo trabalho!
Eu uso o FireFox 2.0.0.2 e não funcionou a textarea já vem com fundo amarelo e quando clico não muda nada a bordar não fica vermelha!
Ficou muito legal esse efeito, eu estava atrás dele já faz um tempo. Só conseguia reproduzí-lo em JS.
Mauricio, esta pseudo propriedade não é reconhecida no IE7 RC1.
Parabéns, ficou muito legal, continue assim pq hoje todos devomos nos ajudar….
sou web designer e adoro o que faço, mas tenho muito que aprender ainda !
Caro Mauricio
Essa pergunta não tem nada a ver com o excelente post, mas foi lendo-o que me veio a dúvida. Você recomenda o navegador Firefox ou o navegador Opera ? Porque ? Muito obrigado pelos ensinamentos tanto em seu site quanto em seu blog.
Olá Maujor, parabens pelo seu trabalho e obrigado por toda a informação que vc passa para nos, aprendi muita coisa lendo as materias do seu site, hj meu blog todo desenvolvido em asp.net com ajax usa CSS e estou fazendo maravilhas, hj mesmo vou mudar o layout do meu segundo blog http://df.raphal.net apenas com algumas mudanças no CSS que aprendi graças a vc.
Continue assim!
Vlw!
Ae Samy,
Parabens pelo seu trabalho cara, venho acompanhando por muito tempo o seu trabalho com CSS, indico seu site pra todos que eu conheço… foi a partir dele que aprendi o CSS e pude migrar o site que desenvolvo para CSS… agora estou estudando PHP, já que o asp está ficando cada vez mais ultrapassado e nada melhor do que um Open Source pra dar energia pra gente, quanto mais com as incriveis coisas que se pode fazer com AJAX + PHP + MySql… Se possível, disponibiliza algo pra gente sobre AJAX, o material em português ainda não é bom e meu inglês está beeeeemmm enferrejuado! mas to mandando ver nuns cursos pra melhorar essa carência…
Abraços e continua o bom trabalho
Ola Maujor….
ja algum tempo acompanho seu site e agora esta nova empreitada, o seu blog.
ta de parabens……..sempre que tenho uma duvida to eu la no meu browser:
maujor + CTRL+ENTER
tenho o feed deste blog adicionado no bloglines, mas o link do titulo do post esta vindo vazio. nao consigo entrar direto na sua materia.
abraços e continue sempre com estas bem vindas novidades