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

When highlight is called, the source sets the backgroundImage to none , and I don t know of a way to configure that. You can always create your own highlight effect and simply not remove the backgroundImage(I ve done this, just copy/paste the original and change one .css() call).

Another thing you can do, although it isn t as clean is:

$("#searchInputWithMap").click(function () {
    $(this).effect("highlight", {}, 3000);
    $(this).css( backgroundImage , url(/images/search4.png) );
 });

There will be a gap, but this will put the background image back in place right after the highlight animation has started.

Answer 2

Add !important to your CSS, like this:

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

Use with care.

Answer 3

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

Answer 4

Can you add a transparent alpha channel to the highlight color? I m not really familiar with CSS, but that would seem like the place to check.

Otherwise, could you just replace the bg image with a version you made that appears highlighted and not highlight the box at all?

友情链接