How to prevent background image from scrolling in form field in IE?

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; }



          


        

Answer 1

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

Add wrapper div around each input, like this:

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.