Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

A pseudo-classe focus

Publicado em: 2006-03-23 — 28.599 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.

12 comentários na matéria: “A pseudo-classe focus”

  1. Lucas NunesNo Gravatar disse:

    Muito bom, adorei este recurso !

  2. Paulo FernandoNo Gravatar disse:

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

  3. NatanaelNo Gravatar disse:

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

  4. GeisonNo Gravatar disse:

    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!

  5. WesleyNo Gravatar disse:

    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!

  6. KaduNo Gravatar disse:

    Ficou muito legal esse efeito, eu estava atrás dele já faz um tempo. Só conseguia reproduzí-lo em JS.

  7. Juliano NunesNo Gravatar disse:

    Mauricio, esta pseudo propriedade não é reconhecida no IE7 RC1.

  8. guilhermeNo Gravatar disse:

    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 !

  9. Carlos JoséNo Gravatar disse:

    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.

  10. RafaelNo Gravatar disse:

    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!

  11. AllanNo Gravatar disse:

    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

  12. marcio gazettaNo Gravatar disse:

    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

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo