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 — 26.189 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.

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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 http://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