h1

IE7 Input background image scroll upon typing a long text

October 8, 2009

As you probably already know having a background image on an input field is buggy in ie7.
When you type in a long text the image scrolls left …
Even if there are a lot of opinions regarding this issue on the web none worked for me as I wanted (cross-browser).

Here is my solution:

The CSS:

input#SearchInput {
border: 0;
width: 230px; /* Your background image width */
height: 22px; /* Your background image height */
line-height: 22px; /* Your background image height */
background:transparent; /* This is the trick */
}
#ieSuge {
background:url(/images/your_input_image.png)  no-repeat left top;
height: 22px;
}

The HTML:

<div id="ieSuge">
<input id="SearchInput" type="text" />
</div>

Try it…
It works in ie6, ie7, FF,Chrome,Opera
If you find useful my solution leave me a comment!
Like always if i missed something just drop me some lines below

One comment

  1. Ai ales un nume ‘intelept’ pentru wrapper LOL



Leave a Comment