Padrões Web e CSS - Caio J Ruman » IE7 http://www.caioruman.com/blog Padrões Web, CSS, SEO e derivados Thu, 22 May 2008 01:25:45 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Fix no IE7 para o background-image no input text http://www.caioruman.com/blog/fix-no-ie7-para-o-background-image-no-input-text-09-03/ http://www.caioruman.com/blog/fix-no-ie7-para-o-background-image-no-input-text-09-03/#comments Mon, 03 Sep 2007 18:00:50 +0000 admin http://www.caioruman.com/blog/?p=5 Se você já usou alguma vez uma imagem para background de um input text, sabe que no IE6, para a imagem não dar scroll quando uma quantidade de texto maior que o tamanho da caixa de texto for digitada, é só declarar background-attachment: fixed. Preferencialmente numa folha de estilos própria para o IE6.
Infelizmente, isso não funciona no IE7.

Até o momento, só há 2 modos de fazer com que a imagem não de scroll junto com o texto.

Primeiro modo, e mais simples e besta: Definir um maxlenght para a caixa de texto do mesmo tamanho da mesma. :)

Segundo modo, quando o primeiro modo não for possível:

Coloque um span em volta do input text, e na folha de estilos própria para o IE7, remova o background do input text e coloque no span.

Segue exemplo abaixo:
Exemplo do fix para background-image no IE7

Não é a alternativa mais elegante, mas é a única que eu descobri até o momento.
Se você não quiser “sujar” o html com tags inúteis, você pode colocar os spans via javascript.

]]> http://www.caioruman.com/blog/fix-no-ie7-para-o-background-image-no-input-text-09-03/feed/ 3