A pseudo-classe focus

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.

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.