Question

The problem is in IE7 and 6 (I have to support 6 at work).

.myForm input { background: url(../images/input_bg.jpg) no-repeat; }


<form class='myForm'>
     <input type="text" />
     <input type="text" />
     <button>Submit</button>
</form>

In IE when you type in the input field, once you reach the end the image stops repeating and text is shown without any background image in the back of the input field. In firefox and other browsers including IE8 the text just scrolls but the image stays in place. Why does it end in IE7 and 6?

P.S. I can’t remove no-repeat in the image since it has borders and you can tell it’s repeating in a weird way.

Answer 1

Tested in IE6/7/8 / Firefox / Chrome.

Add wrapper div around each input, like this:

<div><input type="text" /></div>

Use CSS like this:

.myForm input { background: transparent }
.myForm div { background: url(../images/input_bg.jpg) no-repeat; display:inline }
.myForm input, .myForm div { width: 150px }

It’s not fantastic, but it works. A more eloquent way would be to add the wrapper div and modify the styles using JS if the browser is <=IE7.