Melhor Agora

Sei que é difícil trabalhar, muitas vezes, quando se quer estilizar inputs por css e não conseguimos devido a alguns navegadores como o Internet Explorer. Existem várias técnicas de CSS que fariam com que os desenvolvedores deixassem de usar algumas questões de Java Script, como por exemplo ao invés de utilizar o onFocus do JS para mudar o background de um campo basta fazer por exemplo no CSS input[type=text]:focus, uma regra simples do CSS2.

Mas para ir diretamente ao problema, resolvi ajudar alguns companheiros para fazer o seguinte: colocar um background do tipo imagem em um input.

A primeira vista parece moleza, mas não é. Vejam o seguinte código:

•     border: none;
  background: url(../images/input.gif) no-repeat;
  padding-top: 8px;
  text-indent: 8px;
  width: 260px;
  height: 28px;

Esse código poderia funcionar perfeitamente como background porém no IE6 e IE7, quando o texto ultrapassa o limite do campo a imagem começa a deslocar-se para a esquerda. Se os browsers fossem 100% corretos seria só corrigir o problema utilizando uma propriedade: background-attachment: fixed;

O problema maior é que no IE essa maravilha não funciona, sendo que no IE7 o background até desaparece. Pesquisando um pouco não encontrei nenhuma solução e (desculpem) mas percebi que alguns desenvolvedores de nome oferecem soluções do tipo “gambiarras ferozes” ou ainda indicam utilizam outras propriedades para tentar resolver.

Pois bem lá vai a mágica:

background: url(../images/input.gif) no-repeat center right; 

Ou seja, sempre a imagem estará alinhada a direita, portanto quando o texto estrapolar a área o backdround ficará “fixo”. Obs: Caso não funcione no IE6 envie um comentário que corrijo para vocês.