How do I use the "highlight" jquery effect without temporarily hiding the background-image?

Question

I am trying to use the jquery ui "highlight" effect on an input html element with a background image set in the CSS (A search bar with a magnifying glass). During the "highlight" animation, however, the background image temporarily goes away and then appears once the highlight animation is over. I would like the image to remain throughout the animation. Any ideas?

HTML:

<input class="searchInput" id='searchInputWithMap' type="text" tabindex="100" name="searchStructures" />

CSS:

.searchInput {

 font-family:Trebuchet MS,Helvetica,sans-serif;
 background:transparent url(/images/search4.png) no-repeat scroll 8px 6px;
 height:22px;
 line-height:28px;
 padding-left:32px;
 padding-right:3px;
 padding-top:5px;
 padding-bottom:5px;
 margin:5px 0;
 border:1px solid #999999;
 font-size:130%;
 height: 32px; 
 width: 400px;
 vertical-align:center;
    color:#BBBBBB;

}

Answer 1

Add !important to your CSS, like this:

.searchInput { background-image:url(/images/search4.png) !important; }

Use with care.

Answer 2

I dug into the highlight code of JQuery UI, and I think line #4583 is your problem:

el.css({backgroundImage: 'none', backgroundColor: color});

You could change your copy of this function to look more like this:

el.css({backgroundColor: color});