Altere a borda automática em campos ativos no Browser

Bruno Kenj | Usabilidade, WWW

Pessoal,

algumas pessoas estão usando o Chrome e ao colocar o foco dentro de um campo html, uma borda é adicionada automaticamente neste campo. Como desenvolvedores Web, devemos ficar atentos pois isso pode ocasionar algum problema no layout.

A borda adicionada pelo Chrome é mais ou menos isso daqui, somado com o efeito de anti-aliasing.

input:focus { border:1px solid #e3be75; outline:1px solid #f1ca80; }

Para sobrescrevermos este comportamento, basta alterarmos o atributo outline, durante o foco (:focus).

Para substituir em todos os elementos, podemos um dos dois códigos abaixo:

*:focus { outline:0 none; }

input:focus { outline:0 none; }

Para personalizar a borda, podemos usar o seguinte exemplo:

CSS:

*:focus { outline:0 none; }
input { border:1px solid #e3e3e3; }
input.minhaBorda:focus { border:1px solid #000000; }

HTML:

<input class="minhaBorda" type="text" />

Bem simples, não? Cuidado, pois alguns objetos como o submit e o button, podem ficar sem foco também. Nesse caso, pode usar um seletor, em CSS ou jQuery – input[type=text] – para filtrar os objetos certos.

abraços,

Comentários (0) | 21-01-2010

Comentário fechado.